Vue~路由

最新推荐文章于 2024-05-16 23:40:36 发布

thisCheng

最新推荐文章于 2024-05-16 23:40:36 发布

阅读量102

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/thisCheng/article/details/125257888

版权

一，什么是路由

路由Router，描述了不同的请求和对应的处理函数之间的映射关系

接受用户请求url地址
映射规则：url地址 对应一个处理函数
调用处理函数

路由：英文单词router，表示了根据映射规则，分发用户请求到不同的业务模块，执行业务流程的过程

二，为什么要使用路由

1，动态组件切换页面，无法通过浏览器url路径切换

2，动态组件设置自定义属性和监听自定义事件比较繁琐

3，页面中出现二级页面时，动态组件的切换方式不太友好

因为动态组件实现页面切换，不论是开发中，还是在实际使用中，代码过于繁琐，同时对于系统资源消耗较大；所以要使用路由来完成页面切换的功能！

路由基础

1，下载安装

创建Vue2.x版本项目

进入项目执行命令下载安装路由模块

npm i vue-router@3 -S

在项目中安装路由，指定3的大版本，最新版本4和vue2之间存在一些问题

2，快速入门

（1）创建路由视图组件

出现了vue-router路由模块之后，通过路由切换的页面组件，称为路由视图组件

（2）配置路由映射规则

//引入依赖
import Vue from 'vue'
import VueRouter feom 'vue-router'

//挂载插件
Vue.use(VueRouter)

...


//创建映射规则
const routes=[
{
path:'/url',
component:url访问的页面组件
}
]
//创建路由对象
const router=new VueRouter({
routes
})
//导出
export defalut router

<template>
  <div id="app">
    <h2>入口模块，vue-router路由</h2>
    <!-- 指定显示路由组件的位置 -->
    <router-view></router-view>
  </div>
</template>

(3）添加、注册、挂载路由规则

编辑运行入口模块main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index' // 引入路由模块

Vue.config.productionTip = false

new Vue({
  router,                       // 挂载/注册/添加路由
  render: h => h(App),
}).$mount('#app')

3，router-link 路由导航

本质上就是一个超链接

<template>
  <div id="app">
    <!-- 路由导航：本质上就是一个超链接-->
    <ul>
      <!-- vue-router提供了一种固定语法，用于添加导航链接-->
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/list">列表</router-link></li>
      <li><router-link to="/ucenter">用户</router-link></li>
      <li><router-link to="/about">关于我们</router-link></li>
    </ul>
    <!-- 指定显示路由组件的位置 -->
    <router-view></router-view>
  </div>
</template>

4，导航高亮

点击导航链接，页面中展示对应的路由视图组件

导航链接上添加特定的样式，让用户知道当前路由视图组件对应的是哪一个导航

（1）直接修饰默认样式 router-link-active

编辑App.vue，添加高亮样式

.router-link-active{
  display: block;
  background: orangered;
  color: white;
}

（2）自定义高亮样式

编辑路由模块index.js，指定导航高亮

....
const router = new VueRouter({
  routes,
  linkActiveClass: 'active'     // 指定高亮样式名称
})
...

然后编辑app.vue 添加高亮

/* .router-link-active{ */
.active{
  display: block;
  background: orangered;
  color: white;
}

5，严格匹配

VueRouter路由的路径匹配方式，是按照正则表达式的方式匹配的；最常见的路径写法就是字符串的完整写法！但是某些情况下会出现一些路径互相包含的问题，如：

<ul>
    <li><router-link to="/">LOGO</router-link></li>
    <li><router-link to="/main">首页</router-link></li>
    <li><router-link to="/login">登录</router-link></li>
    <li><router-link to="/reg">注册</router-link></li>
</ul>

上述首页、登录、注册链接中，都包含了LOGO链接，直接导致的问题就是多导航高亮:

解决方法：路由中，可以通过严格匹配方式进行处理，给可能存在问题的链接添加exact属性

<ul>
    <li><router-link to="/" exact>LOGO</router-link></li>
    <li><router-link to="/main">首页</router-link></li>
    <li><router-link to="/login">登录</router-link></li>
    <li><router-link to="/reg">注册</router-link></li>
</ul>

6，路由别名

某个组件可以同时通过多个路径进行访问时，可以使用路由别名，如：

http://localhost:8080/，路由路径：/，页面组件：Main.vue
http://localhost:8080/main，路由路径：/main，页面组件：Main.vue

语法：

...
const routes = [
   {
       path: '/main',
       alias: '/',				// 配置别名
       component: Main
   },
    ....
]
...

7，路由重定向

用户访问某个路径时，程序将用户访问的路径重新指向了另一个路径并进行访问，这个过程称为路由重定向，如：

用户发起了请求：http://localhost:8080/，路由路径：/，重定向：/main
程序自动修改了请求：http://localhost:8080/main
程序自动重新请求了/main，页面显示组件：Main.vue

修改路由规则，添加重定向配置（常见）

...
const routes=[

   {
      path:'/',
      redirect:'/main'
    },
    {
      path:'/main',
      component:Main
     }
 ...
  ]

路由中，别名和重定向的区别？

路由别名、路由重定向都是路由模块中，为了提高用户体验将用户的一个空白请求路径映射到指令路由规则和页面组件的一种操作方式。

别名方式相当于给一个路由规则添加了一种访问路径，和本身的路径都可以访问到当前组件；用户发起请求的URL的地址从始至终都没有发生改变。

重定向相当于将用户发起的URL请求地址进行了重写，转换成指定的另一个URL重新发起请求获取页面组件；用户发起的请求URL地址发生了改变。

项目中别名的方式偶尔使用，重定向使用多一些。

8，路由匹配模式

路由匹配模式，也称为路由历史记录，主要用于切换底层路由匹配方式的

（1）两种匹配模式语法

Vue-Router提供了两种路由的匹配方式，分别是：hash模式（默认）、history模式

语法：

...
const router = new VueRouter({
   routes,		// 路由映射规则
   // mode: 'hash',	// 路由匹配模式，默认hash模式
    mode: 'history' // 路由另一种匹配模式，底层history.pushState保障页面不刷新
})
...

9，命名路由

项目一旦开发完成后，后期可能会遇到各种需求进行变更：变更请求路径

（1）配置路由映射规则，给路由定义name选项（明明路由）

...
const routes = [
    ...
    {
        name: 'login',		// 命名路由
        // path: '/login',
        path: '/signin',		// 变更请求路径的需求
        component: Login
    },
    ...
]
    ...

（2）页面组件中，通过命令路由实现页面切换

<!-- 原始切换方式，直接通过路径切换 -->
<router-link to="/home">首页</router-link>
<!-- 新的切换页面方式，通过命名路由切换 -->
<router-link :to="{name: 'login'}">登录</router-link>

10，命名视图

VueRouter中，针对一个页面中同时显示不同内容的页面组件时，提供了一种命名视图的操作

<!-- 回忆插槽 -->
<template>
	<slot name="header"></slot>   <!-- 具名插槽  -->

	<div class="body">
        <slot></slot>		      <!-- 匿名插槽 -->
    </div>
</template>

<!-- VueRouter 路由实现中，提供了一种命名视图 -->
<template>
	<!-- 命名视图 -->
	<router-view name="header"></router-view>

	<div class="body">
        <!-- 匿名路由视图，默认路由视图-->
        <router-view></router-view>
    </div>
</template>

编辑路由规则

   {
        path: '/login',
        components: {
            header: CommHeaderVue,
            default: Login
        }
    },

11，嵌套路由

项目中经常出现二级页面跳转的情况。

VueRouter中提供了二级路由的配置方式，通过路由规则的children属性配置二级嵌套路由

创建四个二级路由页面组件

|-- src/
	|-- pages/
		|-- Home.vue
		|-- List.vue
		|-- Ucenter.vue
		|-- About.vue

配置路由映射规则

...
const routes = [
    {..},
    {..},
    {
        path: '/main',
        components: {
            header: MainHeaderVue,
            default: Main
        },
        children: [   // 配置当前路由规则下的二级路由
            {
                name: 'home',
                path: 'home',
                component: Home
            },
            {
                name: 'list',
                path: 'list',
                component: List
            },
            {
                name: 'ucenter',
                path: 'ucenter',
                component: Ucenter
            },
            {
                name: 'about',
                path: 'about',
                component: About
            }
        ]
    }
]

12，编程式导航

VueRouter给每个页面组件，提供了两个路由对象

$route：当前路由对象，描述了本次请求过程
$router：全局路由对象，描述了整个路由规则

页面组件中可以通过$router实现在代码中完成页面跳转，称为编程式导航

<template>
  <div class="detail-container">
    <h3>查看用户资料页面</h3>
    <button @click="goBack">后退</button>
    <button @click="goForward">前进</button>
    <button @click="pushHome">回到首页push</button>
    <button @click="replaceHome">回到首页replace</button>
  </div>
</template>

<script>
export default {
  created() {
    // 查看路由对象
    console.log(this.$router, "this.$router全局路由对象")
    console.log(this.$route, "this.$route当前路由对象")
  },
  methods: {
    goBack() {
      // 编程式导航：后退，访问上一个历史记录
      this.$router.back()
    },
    goForward() {
      // 编程式导航：前进，访问下一个历史记录
      this.$router.forward()
    },
    pushHome() {
      // 编程式导航：保留访问记录的情况下跳转到指定路由
      // this.$router.push('/home')
      this.$router.push({name: 'home'})
    },
    replaceHome() {
      // 编程式导航：不保留访问记录的情况下跳转到指定路由
      this.$router.replace({name: 'home'})
    }

  }
}
</script>

<style>

</style>