[VUE]关于路由哪些事儿

Posted lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[VUE]关于路由哪些事儿相关的知识，希望对你有一定的参考价值。

什么是路由

之前有个小伙伴面试被问到：
面试官：不用vue能不能写单页面应用？
答：用angular啊（咳咳，开个玩笑），答案确实是可以的，原生js中有个事件叫做onhashchange，可以在window对象上监听这个事件，通过触发事件动态加载js，实现了没有向服务器发起请求却能通过url和页面关联，这就是所谓的前端路由了。
路由反映了url和页面的映射关系

vue路由

言归正传，说说vue-router做路由。
先来个简单的demo:
npm i vue-router --save-dev
先通过js手动引入vue-router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import Vue from 'vue'
import Router from './router5.js'

// router.js中代码
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const home = {
    template:`
    <div>
        <h1>首页路由</h1>
    </div>
    `
}
const details = {
    template:`<h1>详情路由</h1>`
}

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {
            path: '/',
            component: home
        },
        {
            path: '/details',
            component:details
        }
    ]
})

new Vue({
    router:router,
    template:`
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/details">详情</router-link>
            <router-view></router-view>
        </div>
    `
}).$mount('#app');

大体步骤：1.引入 ==> 2.定义路由组件 ==> 3.创建vue-router实例并配置 ==> 4.注入vue实例
1.引入
import vue和vue-router
Vue.use(VueRouter)

2.定义路由组件
前两步没什么说的

3.路由配置：主要三个内容mode,base,routes
mode主要有两种：

  • 第一种是hash模式，hash模式背后的原理就是前面提到的内置的onhashchange事件
  • 第二种是history模式，使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL，可以自由修改path

扯远了，第二个base，

4.注入vue实例
这里注意一下经常有这种写法：new Vue({ router, template:<div></div>}),这里的router写法是ES6写法

嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div id="app">
    <router-link to="/animals">动物园</router-link>
    <router-link to="/animals/lion">狮子</router-link>
    <router-link to="/animals/cat">猫</router-link>

    <!--第一级路径对应的组件会应用到这里-->
    <router-view></router-view>
</div>
<script>
    var tempZoo = {
        template:`<div>
                    这里是动物园<br>
                    <!--第二级路径对应的组件会应用到这里-->
                    <router-view></router-view>
                </div>`
    };
    var tempLion = {
        template:`<img src="lion.png">`
    }
    var tempCat = {
        template:`<img src="cat.png">`
    }
    var myRouter = new VueRouter({
        routes:[
大专栏  [VUE]关于路由哪些事儿an class="line">            {
path:"/animals",component:tempZoo,
                //子层路由规则配置，不能配置默认跳转
                children:[
                    //path地址不能以/开头
{path:"lion",component:tempLion},
{path:"cat",component:tempCat}
                ]
            },
            {path:"/*",redirect:"/animals"}
        ]
    });
    var main = new Vue({
        el:"#app",
        router:myRouter
    });
</script>

样式控制（默认class）

当跳转到某个路由视图时，Vue会为对应的<router-link></router-link>自动添加class。在添加时按照如下规则：
如果路径 部分匹配 （当前url为/a/b/c，则路由中路径为/a，/a/b，/a/b/c的均为部分匹配），则添加class=”router-link-active”。 如果路径 绝对匹配 （当前url为/a/b/c，则路由中只有路径为/a/b/c的才为绝对匹配），则添加class=”router-link-exact-active”。
注意：绝对匹配也符合部分匹配的规则，因此当一个路由和当前url绝对匹配时，会被同时加入两种class。

样式控制（自定义class）

<router-link></router-link>自动添加的class也可以在创建路由对象时自定义。

1
2
3
4
5
6
7
8
9
var myRouter = new VueRouter({
    routes:[
        {}，{}...
    ],
    //部分匹配时class
    linkActiveClass:"active",
    //绝对匹配时class
    linkExactActiveClass:"exact-active"
});

改变router-link的模板标签

<router-link></router-link>在页面上会默认形成<a></a>标签。我们可以通过向其转入属性来决定生成什么样的标签，这不影响其监听点击事件来进行路由跳转。

1
2
3
4
5
<!--使用tag属性来指定形成的标签-->
<router-link to="/r1" tag="div">路由1</router-link>

<!--在页面上的渲染结果：-->
<div>路由1</div>

路由传参（通过url）

路由配置：

1
2
3
4
5
6
var myRouter = new VueRouter({
    routes:[
        //用:参数名形式书写path
        {path:"/r1/:name/:age",component:"template1"}
    ]
});

链接传参：

<router-link to="/r1/lins/24"></router-link>

路由传参（通过JS）

注意：当通过JS传递参数时，接受参数的路由刷新页面会导致参数失效。
路由配置：

1
2
3
4
5
6
var myRouter = new VueRouter({
    routes:[
        //使用name给路由起一个名字
        {name:"rou1",path:"/r1",component:"template1"}
    ]
});

链接传参：

1
2
// 注意这里to前面的冒号
<router-link :to="{name:'rou1',params:{name:'lins',age:24}}"></router-link>

路由收参

组件模板（html部分）收参：

组件中JS部分收参（比如created中）：
this.$route.params.name;
this.$route.params.age;

编程式导航（JS跳转路由）

1
2
3
4
5
6
7
8
9
10
11
//以下所有的的myRouter是使用new VueRouter()创建的对象
//不携带参数
myRouter.push("/r1");
//等价于
myRouter.push({path:"/r1"});
//通过url携带参数
myRouter.push("/r1/lins/24");
//等价于
myRouter.push({path:"/r1/lins/24"});
//通过JS携带参数
myRouter.push({name:'rou1',params:{name:'lins',age:24}});

vue-router常见的坑

1./router/:params1/:params2
这种路由传参，由于路由规则改变了，定义的子级路由会失效

2.{name:”rou1”,path:”/r1”,component:”template1”}
这种方式接受参数的路由刷新页面会导致参数失效。

以上是关于[VUE]关于路由哪些事儿的主要内容，如果未能解决你的问题，请参考以下文章