Router路由管理

Router路由管理

第一、路由按需加载

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
    {
        path: '/login',
        name: 'login',
        component: () => {
            return import ('../views/Login.vue')
        }
    }
]

const router = new VueRouter({
    modes:'history',
    base:process.env.BASE_URL,
    routes
})

export default router
</script>

按需加载import因为是es6语法，需要安装插件，否则报错Unexpected token import

1、安装插件（@babel/plugin-syntax-dynamic-import）

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

2、在babel.config.js配置文件中声明该插件

module.exports = {
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}

3、设置.eslintrc.js配置文件

module.exports = {
    "parserOptions": {
        "parser": "babel-eslint",
     }
}

路由守卫

拦截钩子：
（一）全局守卫：router.beforeEach( (to,from,next ) => {})

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
        path: '/',
        name: 'Index',
        component: () => {
            return import ('../views/Index.vue') //按需加载组件
        }
    },
    {
        path: '/login',
        name: 'login',
        component: () => {
            return import ('../views/Login.vue')
        }
    }
]

const router = new VueRouter({
    modes:'history',
    base:process.env.BASE_URL,
    routes
})

//全局路由守卫
router.beforeEach((to, from, next) => {
    const isLogin = localStorage.ele_login ? true : false;
    if (to.path == '/login') {
        next();
    } else {
        isLogin ? next() : next('/login');
    }
});

export default router

（二）独享守卫：beforeEnter( to,from,next){}

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
    {
	    path: '/test3/:id',
	    name: 'test3',
	    //独享守卫
	    beforeEnter(to, from, next) {
	        console.log(to);
	        console.log(from);
	        console.log(next);
	    },
	    component: () => {
	        return import ('../views/Test3.vue')
	    }
	}
]
const router = new VueRouter({
    modes:'history',
    base:process.env.BASE_URL,
    routes
})
export default router
</script>

（三）组件守卫：beforeRouteEnter(to,from,next){}

<template>
    <div id="Tests">
        <h1>test2</h1>
    </div>
</template>
<script>
    export default {
        name: "Tests",
        //组件守卫
        beforeRouteEnter(to,from,next){},
    };
</script>

第二、router-view与router-like

1、router-view是一个展示视图标签，就像一个插槽，占据一个地方等待组件的填充
2、router-line是一个视图路径，有以下属性

（1）to 表示将要展示的组件路径
（2）active-class 表示点击之后将要展示的样式
（3）path后面可以拼接一个参数 如/:id

路由设置
path: '/test3/:id',
name: 'test3',
component: () => {
     return import ('../views/Test3.vue')
}

//地址链接
<router-link to="/">Test1</router-link>
<router-link to="/test2">Test2</router-link>
<router-link to="/test3/79">Test3</router-link>

//视图
<router-view />

第三、Js事件地址跳转

1、跳转到指定页面（$router）

<div @click="$router.push('/home')"></div>

2、跳转到指定页面，并且传参（$router ==> $route）

1、跳转页面：$router.push()

2、接受页面：$route.query.city

A页面
（1）params传参方式，
----1>刷新页面，参数无效
----2>只能使用name做路由参数名
<div @click="$router.push({name:'home',params:{city:citdata}})"></div>

（2）query传参方式
----1>刷新页面，参数保留
----2>name和path都可做路由参数名
<div @click="$router.push({name:'home',query:{city:citdata}})"></div>
<div @click="$router.push({path:'home',query:{city:citdata}})"></div>

B页面
<script>
export default {
  data() {
    return {
      第一种接受方式
      citdata: this.$route.city
    };
  },
    第二种接受方式
   beforeRouteEnter(to, from, next) {
    // console.log(to.params.city);
    next(vm => {
      vm.citdata= to.params.city;
    });
  }
}
</script>

3、返回上一层页面

<div @click="$router.go(-1)"></div>

第四、动态路由router.addRoutes()

异步获取路由 routerList
{
     path: '/login',
     name: 'login',
     component: 'login'
}
对component的字符串进行映射转化
const routerItem = routerList.map(value=> setComponent(value));
router.addRoutes(routerItem );

//映射路由
const compRoute = {
   'login':()=> import ('./view/Home.vue');
}

//递归转化
function setComponent(value){
    value.component = compRoute[value.compnent];
    if(value.child){
        value.child = value.child.map(son => setComponent(son));
    }
    return value;
}

第五，面包屑$route.match

$route.matche可以获取路由匹配的数组