Vue Router 深入解析-优快云博客

官方文档：router.vuejs.org/

一、配置

方式一

main.js中：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from './components/Hello.vue'

Vue.use(Router);

const router=new Router({
    routes:[
        {path:'/hello',component:Hello}
    ]
});

new Vue({
    router,
    render:h=>h(App),
}).$mount('#app');
复制代码

App.vue中：

<div id='app'>
    <router-link to='/hello'></router-link>
    <router-view></router-view>
</div>
复制代码

方式二

router.js中：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from './components/Hello.vue'

Vue.use(Router);

export default new Router({
    routes:[
        {path:'/hello',component:Hello}
    ]
})
复制代码

main.js中：

import router from './router.js'

new Vue({
	router,
  render: h => h(App),
}).$mount('#app')
复制代码

App.vue中：

<div id='app'>
    <router-link to='/hello'></router-link>
    <router-view></router-view>
</div>
复制代码

二、动态路由匹配

对于多个路径匹配同一个组件的情况（例如User组件显示的是不同用户的信息：/user/foo和/user/bar）：
```
new Router({
    routes:[
        {path:/user/:username',component:User}
    ]
});
复制代码
```
在User组件中可以通过this.$route.params.username获取到当前路径对应得的username。

从/user/foo切换到/user/bar，User组件不会重新渲染，因此需要通过watch来监听：

//User.vue
watch:{
    '$route'(to,from){
        console.log(to.params.username);
    }
}
复制代码

或者使用beforeRouteUpdate：

//User.vue
beforeRouteUpdate(to,from,next){
    console.log(to.params.username)
}
复制代码

若同一个路径匹配了多个组件，则先定义的路由优先级更高：

//`/user`路径会指向User.vue
export default new VueRouter({
    routes:[
        {path:'/user',component:User},
        {path:'/user',component:Admin}
    ]
});
复制代码

三、嵌套路由

实现方式如下：

<!--App.vue-->
<router-view></router-view>
<!--User.vue-->
<router-view></router-view>
复制代码

export default new VueRouter({
	routes:[
		{//默认路径
			path:'/',
			component:Hello,
			children:[
				{path:'',component:Left}
			]
		},
		{
			path:'/hello',
			component:Hello,
			children:[
				{path:'',component:Left},
				{path:'left',component:Left},
				{path:'right',component:Right},
			]
		},
		{path:'/world',component:World}
	]
});
复制代码

四、用函数定向

this.$router.push()

参数可以是路径字符串（router.push('home')）、定位对象（router.push({path:'home'})，router.push({name:'user',params:{userId:123}})）。
若参数中有path字段，那么params就会被忽略。params只能和name配合使用。
备选参数：onCompelete和onAbort回调函数。
会在历史纪录中添加新纪录。

this.$router.replace

与push()类似。
区别在于，replace()不会在历史纪录中添加新纪录，而是替换到当前路由。

this.$router.go(n)

参数n是一个整数，代表前进或后退几步。

五、命名视图

可以设置多个<router-view>并用name属性来区分它们：

<!--App.vue-->
<router-view class="a"></router-view>
<router-view class="b" name="b"></router-view>
<router-view class="c" name="c"></router-view>
复制代码

//router.js
export default new Router({
    routes:[
        {
            path:'/',
            components:{
                default:'Foo',
                a:Bar,
                b:Baz
            }
        }
    ]
});
复制代码

可以和嵌套路由组合使用。

六、重定向和别名

重定向

//router.js
export default new Router({
    routes:[
        {path:'/a',redirect:'/b'},
        //↓配合命名路由使用↓
        {path:'/c',redirect:{name:'d'}}，
        //↓动态重定向↓
        {path:'/e',redirect:to=>{
            //接受目标路由作为参数
            //返回重定向的路径
        }}
    ]
});
复制代码

别名

//router.js
routes:[
    {path:'/a',component:A,alias:'/b'}
]
复制代码

当你访问/b，实际匹配到A组件，但url中还是/b。

Props

通过个组件设置props:[]，可以实现传递数据。

<!--Compo.vue-->
<template>
    <p>{{propName}}</p>
</template>
<script>
    export default{
        name:'Compo',
        props:['propName']
    }
</script>
复制代码

//router.js
export default new Router({
    routes:[
        {
            path:'/compo/:propName',
            component:Compo,
            props:true
        },
        //↓命名视图情况下，要对每个视图设置props的值↓
        {
            path:'/compo/:propName',
            components:{
                default:Compo,
                sideBar:Sid
            },
            props:{
                default:true,
                sideBar:false
            }
        }
    ]
})
复制代码

当props的值为true，this.$router.params就是要传入组件的数据。
当props是一个对象，那它就会作为组件的props传入。
也可以用一个函数，把相关数据return给props。

History模式

vue-router默认是Hash模式：使用URL的hash模拟完整的链接。

也可以使用history模式，这样URL中就不带/#了。

//router.js
export default new Router({
    mode:'history',
    routes:[...]
});
复制代码

-history模式需要后端的设置来配合（若URL匹配不到任何静态资源，就返回index.html，即依赖页面），否则用户直接在浏览器地址栏输入相应的URL就会报404。但这样，需要404页面时也不会出现了，所以：

export default new Router({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})
复制代码