vue-router基本使用

参考：https://blog.csdn.net/wuhenzhangxing/article/details/80707145

一、路由的3个基本概念：route、routes、router

1、route：表示一条路由

2、routes：表示一组路由

3、router：表示路由机制，用来管理路由

二、客户端路由的两种实现方式

1、基于hash

2、基于H5 history api

三、路由实现

1、HTML页面

有两个标签，<router-link></router-link>：表示点击部分，<router-view></router-view>：表示显示部分，如：<router-link to="/home">到首页</router-link>

2、JS页面

import Vue from "vue";

import Router from "vue-router"

const routes=[

    {path:"/home",component:Home},

    {path:"/about",component:About},

];

const router=new Router({routes});

const app=new Vue({ router}).$mount("#app");

三、路由重定向

在routers里面加上一条route：{path:"*",redirect:"/home"}：表示重定向到home页面

四、动态路由

在routes里面添加一条route：{path:"/about/:id",component:About}：其中（:id）就表示动态的参数，如<router-link to="/about/111">关于</router-link>和<router-link to="/about/222">关于</router-link>都会跳转到About组件页面去，只是所带的参数不同。

五、嵌套路由

在一些比较复杂的单页应用里面，不仅有一级路由，可能还存在二级路由，这就需要要用到嵌套路由。

1、首先在一级路由页面添加二级路由的的点击部分：

<router-link to="/home/one">one</router-link>

<router-link to="/home/two">two</router-link>

<router-link to="/home/three">three</router-link>

2、在router里面添加二级路由

const routes=[

    {

        path:"/home",

        conponent:Home,

        children:[

            {path:"one",component:One},

            {path:"two",component:Two},

            {path:"three",component:Three},

        ]

    }

]

六、路由命名

给每条route增加一个name属性，如：{path:"/home",name:"home",component:Home}，

这样在点击部分就可以使用name属性了，如：<router-link :to="{name:'home',params:{id:555}}"></router-link>或者this.$router.push("home")

七、懒加载

改变routes的写法：

const routes=[

    {path:"/home",component:resolve=>require(['./home.vue'],resolve)},

    {path:"/about",component:resolve=>require(['./about.vue'],resolve)},

]