Vue_Router

Vue_Router

一、路由的分离

• 前端路由

• 后端路由

二、Vue中路由的常用配置项

• mode

• routes数组

• Vue路由的内置组件

三、Vue中使用插件的流程

• 安装

cnpm install vue-router -S

• 创建router文件夹并创建index.js文件

• 引入Vue和vue-router进行配置使用

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
let router = new VueRouter({

})
export default router

• 在入口文件main.js中引入，并挂载到vue上

import Vue from "vue";
import App from "./App.vue";
import router from "./router"

new Vue({
   router,
   render:h=>h(App)
}).$mount("#app")

四、路由跳转的方式有哪些？

五、路由传值

• 动态路由传值

• query传值

• 动态路由和query传值之间的区别

• 路由解耦(只使用于动态路由)

• 编程式导航传值

• 嵌套路由（二级路由）

resolve: {
    extensions: [".vue", ".js"],

    //别名的配置
    alias: {
        "@": path.join(__dirname, "../src"),
        "@views": path.join(__dirname, "../src/views"),
        "@assets": path.join(__dirname, "../src/assets"),
        "@common": path.join(__dirname, "../src/common"),
        "@components": path.join(__dirname, "../src/components"),
        "@pages": path.join(__dirname, "../src/pages"),
        "@router": path.join(__dirname, "../src/router"),
        "@store": path.join(__dirname, "../src/store"),
        "@utils": path.join(__dirname, "../src/utils"),
        "@api": path.join(__dirname, "../src/api"),
    }
},

• 配置二级路由

export default {
    path: "/movie",
    component: () => import('@views/movie'),
    name: "movie",
    meta: {
        flag: true
    },

    children: [
        {
            path: "/movie",
            redirect: "/movie/nowPlaying"
        },

        {
            path: 'nowPlaying',
            component:(resolve)=>require(["@/components/nowPlaying"], resolve),
            name: "nowPlaying",
            meta: {
                flag: true
            },
        },

        {
            path: 'comingSoon',
            component: () => import('@components/comingSoon'),
            name: "coming",
            meta: {
                flag: true
            }
        },
    ]
}

• 异步组件

六、路由的生命周期

1. 全局的路由生命周期

• beforeEach

2. 局部的路由生命周期

   • beforeRouteEnter进入时（在beforeCreate创建之前）
   • beforeRouteUpdate更新时
   • beforeRouteLeave离开时

   beforeRouterLeave(to,from,next){
       var flag = confirm("确定要离开当前页面吗？");
       if(flag){
           next();
       }
   }