一文彻底学会Vue路由

简介: Vue Router简介,包括基本使用、嵌套路由、参数传递和路由守卫。首先,通过`npm i vue-router@3`安装,然后在`main.js`引入并应用。配置路由时,创建VueRouter实例,定义如`/home`、`/about`等路径及其对应组件。使用`<router-link>`进行切换,`<router-view>`展示组件。嵌套路由通过`children`配置多级路径,参数传递可使用`query`或`params`。路由守卫分为全局、独享和组件内三种,用于控制访问权限。

vue路由

@[toc]

1.vue-router简单使用

vue-router官网

1.1vue-router的下载
npm i vue-router@3
1.2在main.js
// 改文件是项目的入口文件


// 映入vue
import Vue from 'vue'

// 映入app组件
import App from './App.vue'

//映入vue-rputer
import VueRouter from 'vue-router'

//映入路由器
import router from './router'

// 关闭vue生产提示
Vue.config.productionTip = false

//应用vuerouter
Vue.use(VueRouter)

// 创建vue实例
new Vue({
   
   
  el:"#app",
  render: h => h(App),
  router:router
})
1.3router的配置
//改文件用于专门创建路由

import VueRouter from "vue-router";
// 映入组件
import Home from '../components/Home'
import About from '../components/About'

//创建并暴露一个路由
export default new VueRouter({
   
   
     routes:[
        {
   
   
            path:'/home',
            component:Home
        },
        {
   
   
            path:'/about',
           component:About
        }
     ]
})
1.4 路由的切换
<router-link to="/about">About</router-link>
<router-link to="/home">Home</router-link>
1.5路由指定位置的显示
   <!-- 指定组件展示的位置 -->
        <router-view></router-view>

image.png

注意:
1.路由组件一般存放在pages组件中,普通组件存放在commopnts组件中。
2.每个zujain都有一个$router属性,存放自己的路由信息。
3.切换的路由组件一般是被销毁了

2.嵌套路由
2.1 多级路由的配置
export default new VueRouter({
   
   
     routes:[
        {
   
   
            path:'/home',
            component:Home,
            children:[
                {
   
   
                    path:'message',
                    component:Message
                },
                {
   
   
                    path:'news',
                    component:News
                }
            ]
        },
        {
   
   
            path:'/about',
           component:About
        }
     ]
})

image.png

<template>
  <div>
    <router-link to="/home/message">Message</router-link>
    <router-link to="/home/news">News</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
   
   
  name: "Home",
};
</script>

<style></style>

注意在home页面中需要在跳转的页面上加上/home的路径

2.2 多级路由的query传参

1.query传参

 <router-link
          :to="{
   
   
            path: '/home/message/detail',
            query: {
   
   
              id: item.id,
              title: item.title,
            },
          }"
        >
          {
   
   {
   
    item.title }}
        </router-link>

2.接受参数

在vm的route中接受父路由传递的参数

在这里插入图片描述

  <ul>
      <li>消息id:{
   
   {
   
    $route.query.id }}</li>
      <li>消息标题:{
   
   {
   
    $route.query.title }}</li>
    </ul>
2.3 多级路由的params传参

1.params传参

<router-link :to="`/home/message/detail/${item.id}/${item.title}`">{
   
   {
   
   
          item.title
        }}</router-link>

image.png

2.接受参数

 <ul>
      <li>消息id:{
   
   {
   
    $route.params.id }}</li>
      <li>消息标题:{
   
   {
   
    $route.params.title }}</li>
    </ul>
2.4 接受路由的props参数

在路由中配置全新的配置项props

 props($route){
   
   
                          return {
   
   
                                    id:$route.query.id,
                                    title:$route.query.title
                                }
                            }

在这里插入图片描述
2.接受参数

  props: ["id", "title"],
2.编程试路由
2.1 按钮的跳转
  this.$router.push({
   
   
        name: "detail",
        query: {
   
   
          id: item.id,
          title: item.title,
        },
      });
  this.$router.replace({
   
   
        name: "detail",
        query: {
   
   
          id: item.id,
          title: item.title,
        },
      });

image.png

2.2页面的前进与后退
this.$router.back();
this.$router.forward();
this.$router.go(2) //2表示前进2步,-1表示后退一步

image.png

2.3路由缓存

在路由内容展示的页面的router-view加上keep-live

 <keep-alive include="news">  
      <!-- news为组件名 -->
      <router-view></router-view>
    </keep-alive>
3.路由守卫
3.1 配置前置路由守卫

1.在全局前置路由守卫中,to是即将要跳转的路由,from是来自那个路由,next是是否放行。

image.png

routes.beforeEach((to,from,next)=>{
   
   
  console.log(to,from)
  if(to.path==='/home/news'||to.path==='/home/message'){
   
   
    if(localStorage.getItem('school')==='小明'){
   
   
        next()
    }else{
   
   
        alert('不是小明')
    }
  }else{
   
   
    next()
  }
})

2.在route的mate中添加是否需要鉴权的条件。
在全局前置中通过判断是否需要鉴权来判断是否需要跳转。

image.png

3.2 独享路由守卫
 beforeEnter:(to,from,next)=>{
   
   
                        console.log(to,from)
                          if(to.path==='/home/news'||to.path==='/home/message'){
   
   
                            if(localStorage.getItem('school')==='小明'){
   
   
                                next()
                            }else{
   
   
                                alert('不是小明')
                            }
                          }else{
   
   
                            next()
                          }
                    }

image.png

3.3 组件内的路由守卫
beforeRouteEnter(to, from, next) {
   
   
    console.log(to, from);
    if (to.meta.isAuth) {
   
   
      if (localStorage.getItem("school") === "小明") {
   
   
        next();
      } else {
   
   
        alert("不是小明");
      }
    } else {
   
   
      next();
    }
  },
4.路由的两种请求模式
4.1hash

http://localhost:8080/#/home/news
其中#后的值不会发送网络请求。

目录
相关文章
|
1天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
3天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
15 0
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
15 2
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
9 3
|
3天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
12 2
|
3天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
9 2
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
10 2
|
3天前
|
JavaScript 网络架构
Vue中三个点(...)的意思
**孤立元素**:通过扩展运算符(`...`)可以将数组元素打印出来,如 `console.log(...iArray)`。 - **添加元素**:可以使用扩展运算符结合数组合并来添加元素,例如 `[&#39;0&#39;, ...iArray, &#39;4&#39;]` 或者使用 `push` 方法。 - **删除元素**:通过解构赋值取出数组第一个元素,如 `const [first, ...last] = arr`。 - **数组合并**:可以使用扩展运算符将多个数组合并,如 `[...arr1, ...arr2]`。
5 0
|
3天前
|
JavaScript 前端开发
vue filters过滤器传多个参数
这段内容展示了如何在HTML和JavaScript中使用过滤器(filter)。在HTML中,通过`{{变量 | 过滤器名(参数)}}`的方式传递参数给过滤器。在JavaScript中,定义过滤器函数并接收参数,如`filterAa(aa, bb, cc)`,其中`aa`, `bb`, `cc`分别代表过滤器接收到的第1至第3个参数。示例逐步演示了传1个、2个到3个参数给过滤器的过程。
10 1
|
4天前
|
JavaScript
vue数据的双向绑定
vue数据的双向绑定