vuejs router路由的使用

最近写项目的时候，每天都在接触路由，特来整理一下，理清思路。
路由文件 router.js,然后在main.js中引入。

import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);

const routes = [{
            path: '',
            name: '',
            components: ''
        },{
            ......
        }
    ],
export default routes

路由的懒加载： component: resolve => require(['路由路径'], resolve),路由在被访问的时候才加载对应的组件，更加高效。

声明式导航：<router-link :to="">
编程式导航：this.$router.push()
两种写法的作用相同。

<router-link :to="" tag="div"> 

默认是被渲染成<a>标签,to被渲染成 href标签,如果想渲染成其他标签，可加上tag属性
路由可添加动态参数：
声明式导航写法：(用 id 和 type 为例)

<router-link :to="{name: 'routerName', params: {id: value1,type: value2}}">

编程式导航写法：

this.$router.push({
    name: 'routerName',
    params: {
        id: value1,
        type: value2
    }
})

注意在router.js文件中应先声明路径和容器组件

{
     path: '/routerName/:id/type/:type'
}

此时的浏览器的URL会变成：

http://baseURL/routerName/value1/key2/vaule2

这样的话，我们可以用params来获取对应的参数

this.$route.params.id
this.$route.params.type

注意是$route不是$router!!!

有时候我们需要的是类似这种URL地址：

http://baseURL/routerName?id=value1&type=value2

这种带问号的形式，
写法如下：

this.$router.push({
    name: 'routerName',
    query: {
        id: 'value1',
        type: 'value2'
    }
})

获取参数时：

this.$route.query.id
this.$route.query.type

路由的一些属性和说明:
一样要注意是$route不是$router

带正则的路由：

path: '/routerName/:id(\\d+)'

这是带动态参数的路由，这里限制了id只能是数字，不能是其他字符

const routes = {
    path: '/home',
    component: Home,
    children: [
        {
            path: 'login',
            component: Login
        }
   ]
}

最后 <router-view>是路由出口，路由配置到的组件将渲染在这里

路由元信息