0%

Vue 路由

发布于 / 分类: vue前端开发快速入门与专业应用 / 暂无评论 / 阅读量 91

最后更新于 2019年11月20日

基本写法

首先引入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

Vue 动态组件 vue入门感受
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao