Vue Router的使用过程

首先分为两个部分：
<router-link :to></router-link>
<router-view></router-view>
1:
1.1 在.vue 中
通过to属性指定目标地址，默认渲染成带有正确链接的标签。

<div class="n-w-left">
<router-link :to="path_prefix + '/'"><img class="n-w-logo" :src="logo_src.image"/></router-link>
</div>

功能：定义点击后导航到哪个路径下
在组件中写路由时，因为组件间的切换不满足生命周期的原理，vue会复用组件，所以我们使用watch来监听$的变化。

watch: {
            $route(to) {
            //to表示的是你要去的那个组件
                this.nav_act(to.path);
        },

1.2 路径的定义：在自定义的router文件夹下建立.js文件，可以建立两个，一个是pc端，一个是移动端：
例如：pc端

先import需要的文件
import Vue from 'vue';
import Router from 'vue-router';
告诉vue要使用router
Vue.use(Router)
//声明路径以及其组件名称
const router = new Router({
    routes: [
     //home
        {
            path: '/',        这个路径指向home组件
            component: home
        },
        //login
        {
            path: '/login',
            component: login
        },
    ].concat(mroutes)
    
    export default router
})

1.3 在main.js中引入路由：

import路由
import router from './router'
new Vue({
    el: '#app',
//注入到根实例中
    router,
    store,
    components: {App},
    template: '<App/>'
})

参考博客
2，对应的组件渲染到router-view中：

<template>
    <div id="app">
        <matte-widget></matte-widget>       <!--遮罩-->
        <confirm-widget></confirm-widget>   <!--弹窗-->
        <nav-widget></nav-widget>           <!--导航-->
        <router-view></router-view>
                <!--页面-->
    </div>
</template>