Vue 路由

基本写法

首先引入vue的插件router，地址：https://unpkg.com/vue-router/dist/vue-router.js

下载后head引入,然后创建好html的标签:

<div id="app">
    <ul>
        <li>
            <router-link to="/">主页</router-link>
        </li>
        <li>
            <router-link to="/list">列表</router-link>
        </li>
        <li>
            <router-link to="/about">关于</router-link>
        </li>
    </ul>
    <router-view></router-view>
</div>

使用router-link标签to属性表示路径,使用router-view用于显示组件入口.

var home = Vue.component('my-home',{
    template : '<h2>主页</h2>'
});
var list = Vue.component('my-list',{
    template : '<h2>列表</h2>'
});
var about = Vue.component('my-about',{
    template : '<h2>关于</h2>'
});

我们再创建三个组件用于显示,可以使用Vue.extend或者Vue.component,都要用一个变量引用.

var routes = [
    {path:'/',component:home},
    {path:'/list',component:list},
    {path:'/about',component:about},
    {path:'*',redirect:'/'}
];

创建一个数组变量,里面使用对象来编写路由路径,每个{}表示一个路由页面,path则是浏览器地址栏显示的地址,component的参数为之前创建的组件的变量名.

其中{path:'*',redirect:'/'}表示重定向,一般写在最末尾,表示当地址栏指向的地址非指定好的path时,会自动跳转到home,类似于404提示.

var router = new VueRouter({
    routes : routes
});

路由配置文件写好后自然要创建路由了,new VueRouter创建路由实例,routes的值要为刚刚创建的配置文件routes变量,我们也可以写简写形式,如:

var router = new VueRouter({
    routes
});

直接传入这个配置的变量名即可.

至此路由创建完毕,我们还需要在对应的vue中引用才可以正常使用.

var app = new Vue({
    el : '#app',
    router
});

在对应的Vue实例中加上router即可.

二级路由

一般来说不可能就只有一个一级路由,二级路由甚至三级路由,等等,我们现在就可以看看二级路由.

假设我要在一级路由显示的biz组件里面再加两个路由地址,然后这两个二级路由也有对应的router-view;

首先创建一个Biz组件

var Biz = Vue.component('my-biz',{
    template : '<div>\
        <h2>二级路由</h2>\
        <ul>\
            <li><router-link to="/biz/list">二级路由1</router-link></li>\
            <li><router-link to="/biz/about">二级路由2</router-link></li>\
        </ul>\
    <router-view></router-view>\
    </div>'
});

html上加上这个路由链接元素

<div id="app">
    <ul>
        <li>
            <router-link to="/">主页</router-link>
        </li>
        <li>
            <router-link to="/list">列表</router-link>
        </li>
        <li>
            <router-link to="/about">关于</router-link>
        </li>
        <li>
            <router-link to="/biz">Biz</router-link>
        </li>
    </ul>
    <router-view></router-view>
</div>

路由器配置

var routes = [
    {path:'/',component:home},
    {path:'/list',component:list},
    {path:'/about',component:about},
    {path:'/biz',component:Biz,
        children:[
            {path:'list',component : {
                template : '<h3>二级路由进来了1</h3>'
            }},
            {path:'about',component:{
                template : '<h3>二级路由进来了2</h3>'
            }}
        ]
    },
    {path:'*',redirect:'/'}
];

在biz的对象中添加一个children数组,表示子路由,里面也是一样有path,component,注意子路由path不需要反斜杠表示.component里面template和平时写的一样,你可以直接写html文本,也可以用#xx 获取htm文件中的对应的组件.

基本二级路由就完成了,如果三级路由就继续这样嵌套就行了,但是vue不建议嵌套太多,本身就是作为单页面app开发用的

注意:
组件的html文本必须要有一个根元素将所有的内容包裹

路由匹配

如果我们要复用一个组件,只是路径名发生了变化,就可以使用路由匹配,比如一个user的组件,不同id的用户都要用这个组件来渲染,我们可以通过匹配他后面带的用户名参数来判断.

var Biz = Vue.component('my-biz',{
    template : '<div>\
        <h2>二级路由</h2>\
        <ul>\
            <li><router-link to="/biz/list/foo">二级路由1</router-link></li>\
            <li><router-link to="/biz/about/bar">二级路由2</router-link></li>\
        </ul>\
    <router-view></router-view>\
    </div>',
    watch : {
        '$route'(to,from) {
            console.log(to)
            console.log(from)
        }
    }
});

我们对Biz组件加多一级路径,一个/foo,一个/bar,然后使用watch监听这个路由的变化,to是最新路由地址,from则是过去的路由地址,这两个都是一个对象,里面的params可以拿到路由匹配的东西,前提是路由配置哪里已经设置好了.否则只能通过path属性来查看完整路由地址.

var routes = [
    {path:'/',component:home},
    {path:'/list',component:list},
    {path:'/about',component:about},
    {path:'/biz',component:Biz,
        children:[
            {path:'list/:name',component : {
                template : '<h3>二级路由进来了1{{$route.params.name}}</h3>'
            }},
            {path:'about/:name',component:{
                template : '<h3>二级路由进来了2{{$route.params.name}}</h3>'
            }}
        ]
    },
    {path:'*',redirect:'/'}
];

我们再biz的二级路由上加上了一个/:name,这样表示自动匹配/后面的内容,并且在params中name:xxx的键值对的形式存在,这个name可以自己自定义名字.

在template中插入{{$route.params.name}}来获取到对应的name.

事实上我们还可以进行多个匹配,无非就是/:name/:id/:user这种形式写法,中间也可以使用普通路径/:name/path/:id这样,都是可以的,只要进入了这个对应的路由,params都可以获取到对应的路由地址的值.

*全匹配符号

这个符号可以理解为正则中的任意字符匹配,他连/也可以匹配到,比如我有一个路由地址为/user-aaa/sadad/asdasda,使用全匹配可以这样写`/user-,然后就可以自动匹配到后面所有的值.当然你可以限制一下,比如到sa结束/user-*sa`