vue-router详解

最新推荐文章于 2024-04-29 10:42:46 发布

儒雅的曹曹曹

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量531

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CYL_2021/article/details/125608552

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.vue-router的基本使用

1.认识vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
官网：https://router.vuejs.org/zh/
vue-router是基于路由和组件的
路由用于设定访问路径，将路径和组件映射起来
在vue-router的单页面应用中，页面路径的改变就是组件的切换

2.使用vue-router

安装vue-router：npm install vue-router --save
注：直接下载可能出现如下问题

原因：可能是因为vue-router的版本过高
解决：下载低版本的（不加版本号默认都是下载最新版本的）
例如：npm install vue-router@3.2.0
在router文件夹下的index.js中使用它
1)导入路由对象，并且调用 Vue.use(VueRouter)
2)创建路由实例，并且传入路由映射配置
3)在Vue实例中挂载创建的路由实例

//index.js
 import Vue
from "vue";
//导入
import VueRouter from "vue-router";
//调用
Vue.use(VueRouter);
//路由映射配置
const routes = [{
   path: '/helloWorld',
   component: () => import('../components/HelloWorld.vue')

}];
//创建路由实例
const router = new VueRouter({
   routes
})
export default router
//App.vue
import Vue from 'vue'
import App from './App.vue'
//导入router
import router from './router'
Vue.config.productionTip = false
new Vue({
//挂载创建的路由实例
 router,
 render: h => h(App),
}).$mount('#app')

使用步骤
1）创建路由组件（components文件夹下）

//HelloWorld.vue
<template>
 <div class="hello">
   <h1>{{ msg }}</h1>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 data() {
   return {
     msg: "HelloWorld",
   };
 },
};
</script>
<style scoped>
</style>

2)配置组件和路径的映射关系(router文件夹下）
在这里插入图片描述
3）使用路由

在这里插入图片描述
<router-link>:该标签是一个vue-router中已经内置的组件，他会被渲染成一个<a>标签
<router-view>:该标签会根据当前的的路径，动态渲染出不同的组件（不写不会显示跳转路由的内容）

3.配置默认路由

默认情况下, 进入网站的首页, 我们希望渲染首页的内容
在这里插入图片描述
redirect是重定向, 也就是我们将根路径重定向到/helloworld的路径下,

4.router-link补充

在前面的<router-link>中, 我们只是使用了一个属性: to（:是v-bind的语法糖，不加里面的内容会被认定为字符串）, 用于指定跳转的路径.
<router-link>还有一些其他属性:

tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a>
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.
在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.
但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.
该class具体的名称可以通过router实例的属性进行修改

在这里插入图片描述

5.路由跳转的方式

1）router-link（上面使用的方式）
2）
在这里插入图片描述

6.动态路由

动态路由就是把匹配某种模式下的路由映射到同个组件中，其实本质就是通过url进行传参

比如说：有一个商品Goods的组件，我们需要让不同的商品id都映射到这个组件中，此时就需要用到动态路由了。

动态路由传递参数的方式
-可以通过两种方式来传递动态参数：
（1）、params
配置路由格式: /router/:id
传递的方式: 在path后面跟上对应的值
传递后形成的路径: /router/123, /router/abc
实例：

路由：

{
path: "/user/:userId",
  component: user
}

传递参数：

<template>
<div>
<router-link :to="'/user/'+userId" tag="button">用户</router-link>
</div>
</template>
<script>
export default{
name:'App',
data(){
return{
   userId:'lishi'
}
},
}
</script>

在对应的组件中调用
   userId(){
            // userId和在index.js中传入的path相对应,$route谁处于活跃状态，就指向那个对象
            return this.$route.params.userId 
        }

（2）、query

配置路由格式: /router, 也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc

在这里插入图片描述

在对应的组件中调用
   userId(){
            // userId和在index.js中传入的path相对应,$route谁处于活跃状态，就指向那个对象
            return this.$route.query.name
        }

补充：$route和$router的区别

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等

7.vue-router嵌套路由

实现嵌套路由有两个步骤:

创建对应的子组件, 并且在路由映射中配置对应的子路由.（在home页面加入news和message）

注意：子路由里面的路径不能加/

在home组件内部使用标签.
在这里插入图片描述
嵌套的默认路径

8.全局路由守卫

什么是导航守卫？

vue-router提供的导航守卫主要用来监听监听路由的进入和离开的
vue-router提供了beforeEach和afterEach（不需要主动调用next（）函数）的钩子函数, 它们会在路由即将改变前和改变后触发.

全局前置导航守卫：
//这个守卫方法会接受三个参数：
// to：Route ：即将要去往的路由对象，通过这个参数来设置路由的去处。
// from：Route ：当前导航正要离开的路由，通过这个参数来设置路由的出发处。
// next：Function ：这个方法是必须要进行调用的，通过这个参数来resolve这个钩子函数
// next（）：进行下一个钩子，也就是下一个应该去跳转的路由
// next(false)：中断当前导航。
// next(‘/’)：跳转到一个不同的地址，当前导航中断，进行新的导航
// next(error)：终止该导航，并将错误传递给router.onError（）注册的回调。

router.beforeEach((to, from, next) => {
  //对页面的标题进行设置，获取路由元信息当中的title
  document.title = `${to.meta.title};
  //获取本地存储的用户名
  const role = localStorage.getItem('ms_username');
  //判断是否存在用户名以及下一个钩子是否是跳转到 '/login'
  if (!role && to.path !== '/login') {
    //跳转到 '/login'
    next('/login');
  } else {
    next();
  }
});

9.keep-alive

keep-alive是Vue的一个内置组件，可以使被包含的组件保留状态，或避免重新渲染
其有两个比较重要的属性：

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

注：在使用keep-alive包裹的组件中，会多出两个生命周期函数actived和deacitived，在正常组件中是不会被调用的

activated
在 keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用
deactivated
在 keep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用

儒雅的曹曹曹

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-router详解

安装vue-router：npm install vue-router --save注：直接下载可能出现如下问题原因：可能是因为vue-router的版本过高解决：下载低版本的（不加版本号默认都是下载最新版本的）例如：npm install [email protected]在router文件夹下的index.js中使用它1)导入路由对象，并且调用 Vue.use(VueRouter)2)创建路由实例，并且传入路由映射配置3)在Vue实例中挂载创建的路由实例使用步骤1）创建路由组件（co
复制链接

扫一扫