vue-router的基本使用及内容

vue-router适合于构建单页面项目

如果遇见router-view无法显示内容请参考这篇博客 https://www.cnblogs.com/peilin-liang/p/11858100.html

1.下载vue-router     npm i vue-router -S

2.然后在项目中新建router文件夹 

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const constantRouterMap=[{

{

　　　　path: '/',
　　　　name: 'index',
　　　　component: () => import('../src/components/index/index'),
}

}]
export default new Router({
　　mode:'history',
　　routes:constantRouterMap
})

这里涉及到一个知识点   ()=>import('../src/component/index/index')

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。   

npm install babel-plugin-syntax-dynamic-import --save-dev

main.js文件中

import router from '../router/index'
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

App.vue文件中：<router-view />

y<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App" />
        <!-- <transition name="fade"> -->
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

 命名视图

当在同一个页面中需要展示多个视图，这时候需要使用到命名视图，没有命名的视图为默认视图 。

　　　　　<transition name="fade">
            <router-view></router-view>
        </transition>
        <transition name="fade">
            <router-view name="a"></router-view>
        </transition>

{
        path: '/index',
        components:{
            default:() => import('../src/components/index/index.vue'),
            a:() => import('../src/components/generator/generator.vue')
        }, 
        children: [{
            path: '/children',
            component:() => import('../src/components/index/children/index.vue')
        }]
    },

注意：这里的components是加了s的，不加s会报错

路由传参：有三种方法：

注意：还可以利用props组件和路由解耦，具体介绍见：https://www.cnblogs.com/peilin-liang/p/12015804.html

1.使用:方式传递参数

{
        path: '/index',
        component:() => import('../src/components/index/index.vue'), 
        children: [{
            path: '/children/:id',
            name:'children',    //使用命名
            component:() => import('../src/components/index/children/index.vue'),
            props: true,  
        }]
    },

<router-link :to="children/123">切换咯</router-link>

2..使用name与params传值

 params 方式类似于 post 传参，即传递的参数不会显示在 URL 上,而路由列表的 path 不需要配置参数,params 只能用 name 来引入路由，而不能用 path。

import Vue from "vue";
import Router from 'vue-router'

Vue.use(Router);

const constantRouterMap = [
    // 重定向
    {
        path: '/',
        redirect: '/index',
    },
    {
        path: '/index',
        component:() => import('../src/components/index/index.vue'), 
        children: [{
            path: '/children',
            name:'children',    //使用命名
            component:() => import('../src/components/index/children/index.vue'),
            props: true,  
        }]
    },
    {
        path: '/generator',
        name: 'gengrator',
        component:() => import('../src/components/generator/generator.vue')
    }

]
const router = new Router({
    routes: constantRouterMap,
    mode: 'history'
});
export default router

在vue页面中：

<router-link :to="{name:'children',params:{id:msg}}">切换咯</router-link>
//作用相等
this.$router.push({
　　name:'children',
　　params:{
　　　　id:this.msg
　　}
})

//取值
this.$route.params.id
//利用了props之后不再使用$route调用params
export defalut{
　　props:['id'],   //直接调用id,但是需要在配置路由的时候将props设置为true
}

 3.使用path与query传值

  query 方式类似 get 传参，即通过 URL 传递参数。而路由列表的 path 不需要配置参数

import Vue from "vue";
import Router from 'vue-router'

Vue.use(Router);

const constantRouterMap = [
    // 重定向
    {
        path: '/',
        redirect: '/index',
    },
    {
        path: '/index',
        component:() => import('../src/components/index/index.vue'), 
        children: [{
            path: '/children/:id',
          //  name:'children',   使用path传值，不命名name也是可以的
            component:() => import('../src/components/index/children/index.vue'),
            props: true,
        }]
    },
    {
        path: '/generator',
        name: 'gengrator',
        component:() => import('../src/components/generator/generator.vue')
    }
]
const router = new Router({
    routes: constantRouterMap,
    mode: 'history'
});
export default router

vue文件中

<router-link :to="{path:'/children',query:{id:msg}}">切换咯</router-link>

//作用相等

　　this.$router.push({

　　　　path:'/children',
　　　　query:{
　　　　　　id:this.msg
　　　　}
　　})

//取值
this.$route.query.id

 

导航守卫

组件中的守卫

export default {
    name: 'About',
    data(){
        return {
            name: 'YoungAm'
        }
    },
    beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        next(vm=>{
            vm.name = "我是新名字"
        })
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用，只有在父组件内的子组件的跳转才会触发次函数
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        next()
    },
    beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        next()
    }

}

全局守卫

1.beforeEach当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

// 配置路由
const router = new VueRouter({ ... })

//全局守卫的回调函数
router.beforeEach((to, from, next) => {
  // 这里执行具体操作
  // 如果没有next() 的话将不会进行跳转
})

2.afterEach:然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
  // ...
})

路由独享的守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // 仅在该组件上生效，不会影响全局守卫

      }
    }
  ]
})