vue 路由守卫和路由拦截器_Vue路由的使用

一.

vue init webpack projectName

Version: webpack 3.12.0 打包生成的dist文件夹 index.html 无法直接在浏览器中运行

修改两处配置

1.修改

2.新增

----三.做到以上两点 如果router里设置了model为history 依然完犊子----

二.

2.1 动态路由的使用

2.1.1  注册组件

{      path: '/user/:userId',      name: 'User',      component: User    }

2.1.2 使用组件

:to="'/user/' + userId">用户<data() {    return {      userId: 'lisi666'    }  },

2.1.3 组件内取值

export default {        name:'User',        computed: {            userId(){                return this.$route.params.userId            }        },        methods: {},    }

<template>    <div>        <h2>我是用户界面h2>        <p>用户界面p>        <p>{{userId}}p>    div>template>

2.2 路由的懒加载

2.2.1 路由懒加载的三种方式

2.3 路由的嵌套

2.3.1 按部就班的创建两个组件

2.3.2 在路由中配置子组件

2.3.2 在组件中用router-view使用子组件

2.4 传递参数

       方式有两种 1.动态路由 

                            2.query的方式

2.4.1 常规方式创建组件 

2.4.2 使用组件时 利用query传值

<router-link :to="{path:'/profile', query:{name: 'ld',age:18,height:1.88}}"> 档案router-link>

当然如果是代码方式的跳转

methods: {    userClick() {      this.$router.push('/user/' + this.userId);    },    profileClick() {      this.$router.push({        path: '/profile',        query: {          name: 'buliceli',          age:18,          height:1.88        }      });    },  }

2.4.3 在组件内部使用外界传递进来的参数

<template>    <div>        <h2>我是profile组件h2>        <p>{{$route.query}}p>        <p>{{$route.query.name}}p>    div>template>

2.5 导航守卫

前置守卫router.beforeEach((to, from, next) => {  document.title = to.name  next()})export default router;

三.

3.1 keep-alive meet vue-router

   include 字符串或者正则表达 只有匹配的组件会被缓存exclude 字符串或者正则表达 任何匹配的组件都不会被缓存