Vue3 路由

文章目录

• 路由前言
• • 路由基础
  • 子路由
  • 路由传参
  • • [query 传参 path](#query 传参 path)
    • • 静态传参
      • 动态传参
    • [params 传参 name](#params 传参 name)
  • 编程式路由
  • • [利用JS实现路由跳转 router](#利用JS实现路由跳转 router)
    • 案例
  • 路由守卫
• 路由基本切换效果
• 两个注意点
• 路由器工作模式
• 命名路由
• 嵌套组件
• [路由 query 参数](#路由 query 参数)
• • 传递第一种写法：
  • 传递参数第二种写法：
  • 接收参数
• [路由 params 参数](#路由 params 参数)
• • 传递参数第一种写法：
  • 传递参数第二种写法：
• [路由规则的 props 配置](#路由规则的 props 配置)
• • 第一种写法：
  • 第二种函数写法：
• 编程式路由导航
• 重定向

---

路由前言

views里面放的是视图子组件（首页、商家列表、商品列表），以View.vue结尾

components里面放得是通用的子组件

views和components文件夹区别

views和components文件夹都可以存放组件文件

views一般存放视图组件

components一般存放通用的子组件（底部菜单）

视图组件起名字时结尾最好是View结尾

---

路由基础

提示：以下是本篇文章正文内容，下面案例可供参考

新建项目时要把Router空格勾选上


router文件夹中的index.js文件放的是路由的配置文件

是一个数组类型

有写视图必然访问：静态导入

有写视图可能用不到：动态导入

运行原始生成的项目：

上面有两个链接

router-link显示的就是About效果，运行时变成超链接

<router-link to="/about">About</router-link>

路由出口：没有它路由跳转的视图无法显示

<router-view/>

在生成的原始项目父组件中只需要留一个路由出口 ，其他的都可以删掉

在存放路由的配置文件index.js中，删掉HomeView导入，默认的路由配置对象删掉

还有components和views文件夹下的自动生成的文件也都删掉

子路由

children:[
  {
  
  }
]

【示例案例】

在views文件夹中新建IndexView.vue文件，vue生成后只写一个h1标签表明身份（首页视图）

在views文件夹中新建LoginView.vue文件，vue生成后只写一个h1标签表明身份（登录视图）

然后到路由的配置文件index.js中导入首页的视图组件

// .vue 可省略
import LoginView from '@/views/LoginView'

配置首页与登录的视图组件对象

// 路由配置对象
const routes = [
  {
    path: '/',
    name: 'login',
    component: LoginView
  },
  {
    path: '/index',
    name: 'index',
    component: () => import('@/views/IndexView')
  },
]

运行项目：

接下来给页面分割布局，分为三个区域：顶部、侧边栏（<aside>）和主要区域（<section>）。

<router-link> 组件定义了一个可以点击的链接，通过属性 to 指定了链接的目标路径为根路径。当用户点击该链接时，路由会把 URL 跳转到根路径，并渲染对应的组件。

工作区域（<section>）则是根据路由动态渲染的组件所呈现的区域。通过这种方式，我们可以在同一个基本布局下切换不同的页面内容。

另外给代码加了些css样式

<template>
    <div>
      <div class="header">
        <h1>首页视图</h1>
      </div>
      <div class="main">
        <aside>
          <router-link to="">商品查询</router-link>
        </aside>
        <section>
          <p>工作区域</p>
          <router-view></router-view>
        </section>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {};
    },
    methods: {},
    components: {},
    computed: {},
    watch: {},
    mounted() {}
  };
  </script>
  
  <style scoped>
  .header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
  }
  
  .header h1 {
    font-size: 36px;
    margin: 0;
    text-shadow: 2px 2px #444;
  }
  
  .main {
    height: calc(100vh - 100px);
    display: flex;
  }
  
  aside {
    flex: 0 0 150px;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: auto;
  }
  
  section {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    overflow: auto;
  }
  </style>

我们要一点超链接就要在工作区显示对应的页面

所以新建一个商品文件（GoodsView.vue）

vue生成基本结构后只写一个h2标签表明身份（商品查询视图）

有一个视图就要增加一个视图的配置

用children增加，因为可能有多个列表

  {
    path: '/index',
    name: 'index',
    component: () => import('@/views/IndexView'),
    children: [
      {
      path: '/index/goods',
      name: 'goods',
      component: () => import('@/views/GoodsView')
      }
    ]
  }
]

最后把/index/goods路径放在IndexView里面

<router-link to="/index/goods">商品查询</router-link>

运行效果：

路由传参

先新建两个View（ParamView1.vue 和 2），在ParamView1.vue里面加个router-link跳转到ParamView2.vue，在跳转时进项传参

    <!-- Parameter的缩写 -->
    <h1>路由传参1</h1>
    <router-link to="">param2</router-link>

ParamView2.vue内用vue生成后写：

    <h2>路由传参2</h2>
    {{  }}

接下来给这两个视图做一个路由的配置，在index.js页面

  {
    // 三个基本项
    path: '/param1',
    name: 'param1',
    component: () => import('@/views/Param1View.vue')
  },
  {
    path: '/param2',
    name: 'param2',
    component: () => import('@/views/Param2View.vue')
  }

随后把param2的路由地址复制到param1的跳转路径下

    <router-link to="/param2">parameter2</router-link>

随后运行：Param1View视图显示出来了

点击超链接：

跳转成功后接下来传参

query 传参 path

静态传参

在param1中再写一个超链接，用query传参

    <router-link :to="{path:'/param2',query:{name:'张三'}}">param2-query传参</router-link>

其中地址栏中的变化就是传的参

取出路由传递的数据：在Param2View的插值语法中写this.$route.query.数据名字

    {{ this.$route.query.name }}

这时候参数就取出显示出来了

动态传参

在Param1View中加一个输入框input，有输入框就有v-model完成数据双向绑定

<input type="text" v-model="name">

想要的效果：在输入框中输入什么内容就让那个内容传到Param2View中

这时候在data中配置一个数据名

name: ''

随后在上面超链接中把静态数据改成动态数据（path属性）：

    <router-link :to="{path:'/param2',query:{name:name}}">param2-query传参</router-link>

params 传参 name

在index.js中在正常路径后面加一个动态参数支持 params 传参

	// 斜线:/id与age（假定数据）
    path: '/param2/:id/:age',
    name: 'param2',
    component: () => import('@/views/Param2View.vue')

回到Param1View里面，在template标签内再加一个超链接，写动态跳转对象（name属性）

    <router-link :to="{name:'param2',params:{id:1,age:30}}">param2-params传参</router-link>

再到Param2View里面把参数取出来用（还是插值语法）

{{ this.$route.params.id }}<br>
{{ this.$route.params.age }}

回到param1路径点击第三个链接跳转到param2页面：

params传参数据的安全度高

编程式路由

利用JS实现路由跳转 router

在Param1View里面加一个按钮与事件+函数

     <button @click="goParam2">param2</button>

在methods内编写函数

  methods: {
    goParam2(){
      // 编程式路由
      this.$router.push('/param2')
    }
  },

因为单纯跳转不需要传参，所以在index.js中删掉地址

  {
    path: '/param2',
    name: 'param2',
    component: () => import('@/views/Param2View.vue')
  }

点击按钮到param2页面

如果要传参：

index.js页面内加上id数据测试

  {
    path: '/param2/:id',
    name: 'param2',
    component: () => import('@/views/Param2View.vue')
  }

Param1View页面内：

  methods: {
    goParam2(){
      // 编程式路由
      //this.$router.push('/param2')
      this.$router.push({
        name: 'param2',
        params: { id:100 }
      })
    }
  },

输出结果：

案例

需要从首页点击某个 ul 标签内容跳转到另一个页面

在首页视图中导入router(项目中的文件)：import router from '@/router'

然后再那个 ul 标签内容下的 li 标签内加上@click="goXijiade"

在methods内配置

    methods: {
        goXijiade(){
        // 编程式路由
            router.push('/xijiade')
        }
    },

最后在 index.js 文件中配置路径、名字、组件

  {
    path:'/food',
    name:'food',
    component:() => import('@/views/FoodView')
  },

路由守卫

路由守卫就像是一个应用程序的保安。它们可以确保用户只能访问他们有权限访问的页面，防止未经授权的访问。

就像保安在门口检查身份一样，路由守卫可以在路由导航之前或之后检查用户的身份验证和权限，以确保应用程序的安全性和完整性。

同时路由守卫还可以控制路由的激活和离开，确保用户在进行敏感操作时不会意外离开页面。

路由守卫代码写在main.js内的在创建vue对象之前

// 路由守卫
router.beforeEach((to,from,next) =>{
    console.log('路由守卫');
})

此时是大白屏，因为路由路由守卫起作用了，右键控制台可以看见输出

下面加个方法调用next()放行，这时候就可以访问首页了

// 路由守卫
router.beforeEach((to,from,next) =>{
    console.log('路由守卫');
    next()
})

在登录状态的时候需要放行

判断登录状态：在开发者工具内选择应用

本地存储空间：存在本地，只要不删就一直在

会话存储空间：浏览器不关数据一直在

在main.js内删掉log输出，完善路由守卫代码

// 路由守卫
router.beforeEach((to,from,next) =>{
    let login = sessionStorage.getItem('login')
    //判断
    if(login!=null){
        next()
    }
    
})

这段代码是Vue Router中的路由守卫，它会在进行路由跳转前执行。在这里，我们从sessionStorage中获取名为'login'的值，如果该值不为null，则通过执行next()函数允许进行下一步操作，即允许进行路由跳转，否则路由跳转会被阻止。

这段代码的作用是保护需要登录才能访问的页面，如果用户没有登录，则不允许访问被保护的页面。

如果把会话存储内的数据删掉，路由守卫会不放行

在一个项目中，如果用户没登录应该让他跳转到登录页面

首先关掉浏览器，在main.js中调用router.push('/')函数将用户重定向到登录页面

效果：如果不是登录页面，则通过调用router.push('/')函数将用户重定向到登录页面，防止用户直接访问需要登录才能访问的页面。

// 路由守卫
router.beforeEach((to,from,next) =>{
    let login = sessionStorage.getItem('login')
    //判断
    if(login!=null || to.path=='/'){
        next()
    }else{
        router.push('/')
    }

})

这段代码的作用是保护需要登录才能访问的页面，如果用户没有登录，则不允许访问被保护的页面，并且在用户没有登录的情况下，会将用户重定向到登录页面

路由基本切换效果

1. 导航区、展示区
2. 请来路由器
3. 制定路由的具体规则（什么路径，对应着什么组件）
4. 形成一个一个的 xxx.vue、xyz.vue
   
   安装路由：

npm i vue-router

新建文件夹：router，新建文件：index.ts

新建文件夹：components，新建文件：About.vue、Home.vue、News.vue

index.ts代码：

main.ts代码

Home组件、News组件、About组件随便写一些内容

使用路由：main.ts代码

现在就有路由环境了，F12下 Vue 能看见 Routes

app.vue代码

两个注意点

1. 路由组件通常存放在 pages 或 views 文件夹，一般组件通常存放在 components 文件夹

2. 通过点击导航，视觉效果上"消失"了的路由组件，默认是被卸载掉的，需要的时候再去挂载

<!--第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>
<!--第二种：to的对象写法-->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

路由器工作模式

第一种：history 模式：前端多用

优点：URL 更加美观，不带有#，更接近传统的网站 URL

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有 404 错误。

const router = createRouter({
	history:createWebHistory(),//history模式
	/*******/
})

第二种：hash 模式：后端多用

优点：兼容性更好，因为不需要服务器端处理路径。

缺点：URL 带有 # 不太美观且在 SE0 优化方面相对较差

const router= createRouter({
	history:createWebHashHistory(), //hash模式
	/*******/
})	

命名路由

嵌套组件

新闻组件：

index.ts代码添加子级路由

新闻组件：

路由 query 参数

传递第一种写法：

被嵌套展示区代码：

传递参数第二种写法：

简洁一下被嵌套展示区代码：

接收参数

路由 params 参数

备注1：传递 params 参数时，若使用 to 的对象写法，必须使用 name 配置项，不能用 path

备注2：传递 params 参数时，需要提前在规则中占位。

index.ts代码：要占位

被嵌套展示区代码：

传递参数第一种写法：

新闻组件：

传递参数第二种写法：

只能用name，值在index.ts代码中定义的

不能传对象和数组

路由规则的 props 配置

index.ts 代码展示

第一种写法：

将路由收到的所有params参数作为props传给路由组件

第二种函数写法：

可以自己决定将什么作为props给路由组件

编程式路由导航

打开页面三秒实现路由跳转：

脱离<RouterLink>实现路由跳转：新闻标题前加上按钮，一点就能看新闻

新闻组件代码：

重定向

让指定的路径重新定位到另一个路径

在index.ts代码中加上重定向redirect，一打开直接跳转到想要的Home页面