08-路由
什么是路由
- 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应着服务器上对应的资源。
- 前端路由：对于单页面应用程序来说，主要通过URL中的#hash来实现不同页面的切换，同时，hash有个特点：HTTP请求中不会包含hash相关内容；所以，单页面程序中的页面跳转主要用hash实现。
- 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）。
- 前端路由的改变，不会刷新页面。
在 Vue 中使用 vue-router（20-vue-router-路由的基本使用.html）
- 导入 vue-router 组件类库：
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
- 使用 router-link 组件来导航
<router-link to='/login'></router-link>
<router-link to='/register'></router-link>
- 使用 router-view 组件来显示匹配的组件
<router-view></router-view>
- 创建使用
Vue.extend创建组件
const login = Vue.extend({
template: '<h1>登录组件</h1>'
})
const register = Vue.extend({
template: '<h1>注册组件</h1>'
})
- 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
const router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register },
]
});
- 通过 router 属性来来使用路由规则
const login = Vue.extend({
template: '<h1>登录组件 --- {{ this.$route.params.id }}</h1>'
})
使用tag属性定义router-link渲染的标签类型（20-vue-router-路由的基本使用.html）
<router-link to='/login' tag='span'>登录</router-link>
< router-link> 自动转成一个a标签
to='/' 放一个简单的字符串即可（to，就是去哪里的意思，里面放一个字符串的地址）
除了可以写成to，还可以是 :to
:to 的后面可以写成字符串 比如：
to='/a'
:to="'/a'"
:to 可以是字符串，也可以是一个对象：
:to={path:'/a',query:{a:5}}"
:to="{name:'a',params:{a:5}}"
注意：如果使用params就不能定义path，要改为使用name（yinwei）
注意：路径前面一定要带 /，不然在配置路由的时候，地址会累加。
设置路由重定向（20-vue-router-路由的基本使用.html）
{ path: "/", redirect: '/login' }, // 这里的 redirect 和 Node中的 redirect 完全是两码事
//redirect 后面可以放路径，也可以是对象，还可以是通过：to 来获取、判断、处理，并返回一个重定向的路径或路径对象。比如：
{path:'/a', redirect: to => {
console.log(to)
return '/xxx'
//to 获取一个对象，记录了上一次路由的信息（常用：params、query、hash、path.....）
//return 重定向的 字符串路径或路径对象
} }
设置路由高亮（20-vue-router-路由的基本使用.html）
- 使用 router-link 标签选中后，默认添加的类名 router-link-active，直接设置高亮样式。
.router-link-active {
color: red;
text-decoration: underline;
cursor: pointer;
}
- 通过 vue-router 实例的参数对象中的 linkActiveClass 属性，修改 router-link-active 类名，之后再设置高亮样式。
const router = new VueRouter({
linkActiveClass: "myActive"
});
.myActive {
color: green;
text-decoration: underline;
cursor: pointer;
}
设置路由切换动效（20-vue-router-路由的基本使用.html）
<transition mode='out-in'>
<router-view></router-view>
</transition>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
}
在路由规则中定义参数 （21-路由规则中定义参数.html）
- 使用查询路由，在规则中定义参数，通过
this.$route.query来获取路由中的参数
{ path: '/login?id=xxx', component: login }
console.log(this.$route.query)
- 使用动态路由，在规则中定义参数，通过
this.$route.params来获取路由中的参数
{ path: '/register/:id/:name', component: register }
console.log(this.$route.params)
使用children属性实现路由嵌套（22-路由的嵌套.html）
有子级路由，那么记得在父级身上加上< router-view>< /router-view> 此时组件就会在父级的组件上显示。不管多少层都遵循这个规律。
解决激活状态切换时加不了事件的问题：使用.native
比如：@click.native="xxx(..)"
命名视图实现经典布局（23-路由-命名视图实现经典布局.html）
- 标签代码结构
<div id="app">
<router-view></router-view>
<div class="bodyBox">
<router-view name='nav'></router-view>
<router-view name='main'></router-view>
</div>
</div>
- JS代码
const header = {
template: '<div><h1>头部区域</h1></div>'
}
const navBox = {
template: '<div><h1>导航栏</h1></div>'
}
const mainBox = {
template: '<div><h1>主体区域</h1></div>'
}
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: header,
nav: navBox,
main: mainBox
},
}
]
});
编程式路由：(和html5 的 History有点像)
可以使用this.$router 身上的方法去任意切换路由 里面有几个方法：
- push() 直接放入跳转的路径（路由）
- 比如：this.$router.push('/c')
- go() 去第几个
- 比如：this.$router.go(-1)上一步 (+1)下一步
- replace()把当前路径替换成什么
- 比如：this.$router.replace('/c')
