一个简单的例子
<div id="app">
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const Foo = {template: `<div>Foo</div>`}
const Bar = {template: `<div>Bar</div>`}
const routes = [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: '#app',
mounted () {
console.log(this.$route)
console.log(this.$router)
}
})
</script>
动态路由匹配
路由参数
<router-link to="/foo/999">Go to Foo</router-link>
{path: '/foo/:id', component: Foo}
this.$route.params.id
// ==> 999
路由参数变化监视
watch:{
'$route'(to, from) {}
}
beforeRouteUpdate (to, from, next) {}
嵌套路由
const User = {
template: `<div>User: <router-link to="/one">Go to one</router-link>
<router-link to="/two">Go to two</router-link>
<router-view></router-view></div>`,
}
const One = {template: `<div>One</div>`}
const Two = {template: `<div>Two</div>`}
const routes = [
{
path: '/user',
component: User,
children: [
{path: '/one', component: One},
{path: '/two', component: Two},
]
},
]
命名路由
{path: '/bar/:id', component: Bar, name: 'newbar'}
声明式 <router-link :to="{ name: 'newBar', params: { id: 123 }}">bar</router-link>
编程式 this.$router.push({ name: 'newBar', params: { id: 123 }})
编程式导航
this.$router.push('/bar')
//字符串
this.$router.push({path: '/bar'})
//对象
this.$router.push({path: '/bar/123'})
// 完整路径 /bar/123
this.$router.push({ name: 'newbar', params: { id: 123 }})
// 命名的路由 /bar/123
this.$router.push({ path: 'bar', query: { plan: 'private' }})
// 带查询参数，变成 /bar?plan=private
this.$router.go(n)
// 在 history 记录中向前或者后退n步
命名视图（可根据名字显示视图）
<router-view></router-view>
<router-view name="one"></router-view>
const One = {template: `<div>One</div>`}
const Default= {template: `<div>Default</div>`}
const routes = [
{
path: '/',
components: {
default: Default,
one: One
}
}
]
重定向: redirect
第一种
通过redirect
routes: [
{
path: '*',
component: undefined
}
]
routes: [
{
path: '/home',
redirect: '/home'
}
]
第二种
通过redirect - 路由重定向,值得注意的是：当前这个undefined必须是你在上面配置过的地址
routes: [
{
path: '/undefined',
component: undefined
},
{
path: '*',
redirect: 'undefined' //上面配置过，后面才能用
}
]
当前方式你还能这么写
routes: [
{
path: '/undefined',
component: undefined
},
{
path: '*',
redirect:{path:'/undefined'}
}
]
第三种
对象通过name别名写法，同样，还是通过上面配置过的路由地址进行跳转
routes: [
{
path: '/undefined',
name: 'nofind',
component: undefined,
meta:{
login:true,
title:'undefined'
}
},
{
path: '*',
redirect:{name:'nofind'}
}
]
第四种
动态设置重定向目标
routes: [
{
path: '/undefined',
name: 'nofind',
component: undefined,
meta:{
login:true,
title:'undefined'
}
},
{
path: '*',
redirect:(to) => {
/*console.log(to) //to，目标路由对象，当前访问的目标路由信息
return '/undefined'//重定向到一个上面配置过的路由地址*/
//当然，既然说是动态设置，那么肯定不能向上述那样简简单单return完事，如下：
if(to.path == '/abc'){
return '/home' //如果目标路径是abc，那么我重定向到首页home
}
return '/undefined' //其他正常时候跳转到404
}
}
]
不仅仅只是上面这些方式，其实我们还有别的方式也可以进行跳转重定向，小伙伴，比如通过钩子函数
第五种
通过全局路由钩子函数去配置
// 路由钩子函数
//beforeEach即将要进某个路由时候
router.beforeEach((to, from, [next](http://www.php.net/next))=>{
if(to.meta.login){
[next](http://www.php.net/next)(true) //false时候阻止路由执行，默认是true
// next('/login') 在这里判断到后去跳到登录页面，先要在路由里配置
console.[log](http://www.php.net/log)("当前是个404组件，需要登录访问，
其实你还没有登录，不过看你可怜兮兮，我暂时让你旁观！")
}else{
[next](http://www.php.net/next)()
}
})
//afterEach进入组件之后，当然，就没有next了，已经进入了组件
router.afterEach((to, from)=>{
if(to.meta.title){
//当进入了组件后，如果meta里有title就设置title(注意，这个位置document前面需要加上window才能访问)
window.document.title = to.meta.title;
}else{
window.document.title = '世上最完整的vue-router案例'
}
})
第六种
通过局部路由钩子函数去配置
routes: [
{
path: '/document',
name: 'document',
components: { //多个组件渲染到一个路由(命名视图技术)
default:document, //默认渲染到router-view没有name的路由
slide:slide
},
beforeEnter(to,from,[next](http://www.php.net/next)){
//局部路由钩子函数同样有beforeEnter/afterEnter，to可以监听即将到达的路由信息
console.[log](http://www.php.net/log)("路由钩子函数监听到：进入到document组件")
[next](http://www.php.net/next)(true)
}
}
]
通过上面这么多的方式，你基本上可以胜任绝大多数vue.js项目路由重定向需求
别名: alias
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]})
路由组件传值
const Foo = {
template: `<div>Foo {{id}}</div>`,
props: ['id']
// this.$route.params.id
}
const routes = [
{
path: '/foo/:id',
component: Foo,
props: true
}
]
// 布尔 props: true/false
// 对象 props: {id: XXX}
// 函数 props: route => {
return {
id: route.parame.id
}
}
**HTML5 History模式**
const router = new VueRouter({
mode: 'history',
routes: [...]
})
导航守卫
全局守卫
router.beforeEach((to, from, next) => {})
//进入路由前
router.beforeResolve(to, from, next) => {})
//组件守卫和异步路由守卫解析
router.afterEach(to, from) => {})
//进入路由后
路由配置 routes数组对象里面配置
beforeEnter: (to, from, next) => {})
//相同路由触发一次
组件内的守卫
beforeRouteEnter (to, from, next) {}
// 进入导航之前 不能获取this
beforeRouteUpdate (to, from, next){}
// 组件复用,路由改变
beforeRouteLeave (to, from, next) {}
// 导航离开
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的
beforeEach守卫。 - 在重用的组件里调用
beforeRouteUpdate守卫 (2.2+)。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach钩子。 - 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter守卫中传给next的回调函数。
导航A切换到导航B,先调用A组件内beforeRouteLeave,再调用全局beforeEach, 然后AB如果是重用组件则调用beforeRouterUpdate,否则调用路由配置中的beforeEnter,再调用B组件中的beforeRouteEnter,再调用全局的beforeResolve,最后调用全局afterEach
Vue - 
route
本文目标在于区分两者，关于router的详细使用请参照官网https://router.vuejs.org/zh/
前言：this.$router其实是将Vue-Router注入到Vue实例的结果（vue.use()），从而避免每次使用都导入路由。
一. $router
- Vue-Router中的router对象效仿了原生的history对象，用于控制路由跳转。
| 方法 | 描述 |
|---|---|
| push() | 往history 栈添加一个新的记录，实现跳转 |
| replace() | 换掉当前的 history 记录 |
| go(n) | 在 history 记录中向前或者后退n步 |
back(){
this.$router.push({path:'/'});
},
二. $route
- $route记录了当前路由信息
| 字段 | 描述 |
|---|---|
| path | 字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/book/news" |
| query | 对象，表示 URL 查询参数。如果没有查询参数，则是个空对象。 |
| params | 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。 |
| fullPath | 完成解析后的 URL，包含查询参数和 hash 的完整路径 |
| name | 当前路径名字 |
| meta | 路由元信息 |
| matched | 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 |
| redirectedFrom | 如果存在重定向，即为重定向来源的路由的名字 |
| hash | 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。 |
