Vue 路由router

路由

路由是基于hash 和 history 封装的

• hash

// 例子
location.hash = 'demo'

• history

//例子
history.pushState(null,'title','test')

history.back()

history.forward()

history.go(3)

路由在vue中使用流程

ps. 如果在vue create my-project的时候没有选择路由，就手动安装一下。 详细见 router 网站

npm install vue-router

router 基础使用分为以下步骤

1. 在和main.js同级创建router文件夹，一般都是src下同级 下图

image.png

2. 在router文件下新建index.js文件

• 这个是router自动指定的目录，最好不要更改
• 在main.js引入的时候直接 '@/router' 即可

路由基础使用步骤

• 1. 在router/index.js文件中导入router相关包。并且用Vue.use注册一下

import Vue from 'vue';
import VueRouter from 'vue-router';
//使用router插件
Vue.use(VueRouter);

• 2. 声明使用VueRouter，添加一些相关配置，并且注册相关的组件。

const routes = [
    {
        path : '',
        redirect : "/home"
    },
    {
        path: '/home',
        component: () => import('../views/Home')
    },
    {
        path: '/about',
        component: () => import('../views/About')
    }
];


const router = new VueRouter({
    mode : 'history', //使用history模式
    base: process.env.BASE_URL,
    routes
});

• 3.将声明的VueRouter导出

export default router

• 4. 在入口main.js文件中导入router/index.js文件。 并且在Vue里注册
     ps: 因为vue-router底层默认引用的就是router/index.js文件，所以可以简写直接导入到router/目录即可。

import router from "@/router";

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

• 上面的就是基础配置，配置好了就可以使用了。to是对应执行的路径。

    

      首页
      关于
      用户
    
    

router 一些常用字段

• to 对应路径。
• tag 设置类型。例如: tag="button",就是button样式

router路径定义传参字段

// 可以通过:userId 即可
   {
        path: '/user/:userId/:age',
        name: 'User',
        component: () => import("../views/User.vue")
    }

v-bind:to使用，语法糖 :to

//通过name 进行传参
 用户

this.$router常用字段

• this.$router.push
  描述：跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。

//跳转路径, 等同于 history.pushState() 
this.$router.push('home'); 

 //跳转路径
this.$router.push({path: '/about'}); 

// 跳转路径，传参数
this.$router.push({name: 'User',params: {userId: "123",age: 20}});

• this.$router.replace()
  描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

//替换路径, 等同于history.replaceState
this.$router.replace('home');

• this.$router.go(n)
  相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

//返回上一页, 相当于history.back()
this.$router.go(-1);

// 前进一步，等同于history.forward
this.$router.go(1);

// 前进3步
this.$router.go(3);

 // 如果history不够用，就默认失败吧
this.$router.go(-100);
this.$router.go(100);

router接收路由参数的方法，分 ? 和 : 两种接收方式
this.$route是路由信息对象

• ? 形式的参数使用this.$route.query接收参数，结果是一个对象。
  接收格式为?userId=123&age=20

//1.定义方式。只定义路径即可。
{
        path: '/about',
        name: 'About',
        component: () => import('../views/About')
}

//2. 传参方式
 关于

//3. 接收方式

• : 形式的参数使用this.$route.params接收参数，结果也是一个对象。
  例如传参: :to({name: 'User',params: {userId: "123",age: 20}});
  接收格式为 /user/123/20

//1.定义方式
{
        path: '/user/:userId/:age',
        name: 'User',
        component: () => import("../views/User.vue")
}

//2.传参方式
 用户

//3.接收方式
 
接收参数 userId:{{this.$route.params.userId}}  age:{{$route.params.age}}

路由嵌套

开发中肯定会遇到路由嵌套的问题，路由嵌套进一层精简了代码，提高了组件的复用性，降低了代码的耦合度。

• 在路由中定义子路由使用children[]来包含多个路由，这里要注意的是path不需要添加 / 了

{
        path: '/home',
        name: 'Home',
        children : [
            {
                path: '',
                // name: 'News',
                component : () => import('../components/News')
            },
            {
                path: 'news',
                name: 'News',
                component : () => import('../components/News')
            },
            {
                path: 'message',
                name: 'Message',
                component : () => import('../components/Message')
            }
        ],
        component: () => import('../views/Home')
    }

• 使用路由嵌套同路由的正常使用一样。要在对应的路由.vue下使用，例如我上面定义的是在Home下的路由，那么路由应该写在Home.vue中

 
当前为Home.vue页面
    

      新闻
      消息
    

Vue 导航守卫

提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
通俗讲，导航守卫就是控制路由跳转前，或离开路由后的监听操作

更多路由导航守卫使用介绍访问 官网

• 组件内守卫,也就是在组件内才会执行。
  beforeRouteEnter 守卫进入组件前调用
  beforeRouteUpdate 路由改变时调用
  beforeRouteLeave 离开该组件时候调用

keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 不会进入离开每次都执行创建和销毁。

更多动态组件 & 异步组件使用见 官网

• 基础使用

• 过滤路径

• 如果想某个路径网址被缓存，在router 里 增加 meta 属性。其中keepAlive为true表示缓存。

const routes = [
    {
        path: '/about',
        name: 'About',
        meta: {
            keepAlive: true //about路径 需要缓存
        },
        component: () => import('../views/About')
    },
    {
        path: '/user/:userId/:age',
        name: 'User',
        meta: {
            keepAlive: false //user路径 不需要缓存
        },
        component: () => import("../views/User.vue")
    }
];

• 需求：
  默认显示 A
  B 跳到 A，A 不刷新
  C 跳到 A，A 刷新
  实现方式

//在 A 路由里面设置 meta 属性：
{
        path: '/',
        name: 'A',
        component: A,
        meta: {
            keepAlive: true // 需要被缓存
        }
}
//在 B 组件里面设置 beforeRouteLeave：
export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
            next();
        }
};
//在 C 组件里面设置 beforeRouteLeave：
export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.keepAlive = false; // 让 A 不缓存，即刷新
            next();
        }
};