vue3路由

xp_1711

已于 2023-12-19 20:57:39 修改

阅读量1.2k

点赞数 26

分类专栏： # vue教程文章标签：前端框架

于 2023-12-18 12:24:55 首次发布

本文链接：https://blog.csdn.net/qq_40981804/article/details/135059449

版权

vue教程专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、简介

Vue 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。
vue路由库
 vue路由中文文档

二、安装

1、直接下载 / CDN

2、NPM–推荐使用淘宝镜像：

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

3、一般在新建项目的时候已经安装了

三、路由配置

在router文件夹下的 index.js文件中

一、history

地址中不含#号

关键字：createWebHistory

import { createRouter, createWebHistory } from 'vue-router'
const routes = [ {//具体路由配置
  path: '/userinfo',//路由地址
  name: 'UserInfo',//路由名字
  redirect:"/index",//重定向
  component: () => import('../views/UserInfo.vue')//页面组件
}]
const router = createRouter({//创建路由
  history: createWebHistory(process.env.BASE_URL),
  routes//routes是一个数组里面包含多个路由
})
export default router

1、component两种引入

方式一：在头部引入，加载主页面时便会引入

方式二：懒加载（在路由配置时引入），只有加载子页面才引入

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView//在头部引入

  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')//在路由配置时引入
  }
]

const router = createRouter({
  history: createWebHistory (),
  routes
})

export default router

二、hash

地址中含有#号

关键字：createWebHashHistory

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [{
  path: '/userinfo',
  name: 'UserInfo',
  component: () => import('../views/UserInfo.vue')
}]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

四、路由使用

Vue.js + vue-router 可以很简单的实现单页应用。
是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址，即要显示的内容。

<router-link :to="{ path: '/abc'}"></router-link>

1、router-link

相当于常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

1》 router-link 相关属性

（1）to：路由的地址path

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

（2）replace

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

<router-link :to="{ path: '/abc'}" replace></router-link>

（3）append

设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

（4）tag

有时候想要渲染成某种标签，例如 li 标签，于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

（5）active-class

设置链接激活时使用的 CSS 类名。可以通过以下代码来替代。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

注意这里 class 使用 active-class=“_active”。

（6）exact-active-class

配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

（7）event

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

2、router-view

router-view 将显示与路由对应的组件内容。你可以把它放在任何地方，以适应你的布局。

3、案例

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
 
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [ 
	{ 
		path: '/',
		component: Home 
	},
    { 
    	path: '/about', 
    	component: About 
    },
]
 
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里暂时保持简单
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
 
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
 
app.mount('#app')
 
// 现在，应用已经启动了！

3、嵌套路由

const routes = [ 
	{ 
		path: '/',
		component: Home，
		childre:[
			{
				path:"",
				name:""
			}
		] 
	},
    { 
    	path: '/about', 
    	component: About 
    },
]

五路由守卫

1、定义

1、官方的定义
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
2、自己的理解–用户不登陆无法访问其他页面
导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，比如跳转前是否验证登录等，这就是导航守卫。

2、使用导航守卫

（1）安装

npm导入
npm install vue-router --save
cnpm淘宝镜像导入
cnpm install vue-router --save
如果没有安装淘宝镜像需要先安装
npm install -g cnpm --registry=https://registry.npm.taobao.org

（2）配置在router文件夹下的index.js中

3、使用案例

功能：用户只有登录才可以访问其他页面

第一步：编写userInfo.state.js

export default {
    state:{
        userInfo:{}
    },
    mutations:{
        setUserInfo(state,uInfo){
            state.userInfo=uInfo
        }
    }
}

第二步：在store文件夹下的index.js进行引入和注册

import { createStore } from 'vuex'
//引入state模块
import userInfo from "../store/state/userInfo.state.js"
export default createStore({
  //数据较多时，分模块
  modules: {
    userInfo//注册userInfo模块
  }
})

第三步：在router文件夹下index.js中

import store from "../store/index.js"
//在路由跳转前触发
router.beforeEach((to,from,next)=>{
  /*
  * to 将要访问的路径
  * from 代表从哪个路径跳转而来
  * next 只有执行next函数，页面才会跳转
  *
  * */
  //判断用户是否登录
  const userInfo = store.state.uInfo.userInfo
  if(!userInfo.userName){
    //未登录跳转到登录页面
    if(to.path === "/login"){//防止登录页面进入死循环
      next()
      return
    }
    next("/login")
  }else {
    next()
  }
})