路由的基本概念与原理、vue-router 的基本使用、嵌套路由、动态路由匹配、命名路由、编程式导航

最新推荐文章于 2023-03-24 23:55:47 发布

_Tough_Girl

最新推荐文章于 2023-03-24 23:55:47 发布

阅读量530

点赞数

分类专栏： Vue2基础学习文章标签： vue.js

本文链接：https://blog.csdn.net/icemwj/article/details/120504578

版权

Vue2基础学习专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1、路由的基本概念与原理

1.1 路由

路由是一个比较广义和抽象的概念，路由的本质就是一种对应关系。比如说我们在 url 地址中输入我们要访问的 url 地址之后，浏览器要去请求这个 url 地址对应的资源。
那么 url 地址和真实的资源之间就有一种对应的关系，就是路由。

在开发中，路由分为前端路由和后端路由。

（1）后端路由是由服务器端进行实现，并完成资源的分发。

概念：根据不同的用户 URL 请求，返回不同的内容。
本质：URL 请求地址与服务器资源之间的对应关系。

（2）前端路由是依靠 hash 值(锚链接)的变化进行实现。

概念：根据不同的用户事件，显示不同的页面内容。
本质：用户事件与事件处理函数之间的对应关系。
前端路由就是根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系。
前端路由主要做的事情就是监听事件并分发执行事件处理函数。
后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由。

（3）SPA（Single Page Application，单页面应用程序）

后端渲染（存在性能问题）。
Ajax 前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）。
SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过 Ajax 局部更新实现、同时支持浏览器地址栏的前进和后退操作。
SPA实现原理之一：基于 URL 地址的 hash（hash 的变化会导致浏览器记录访问历史的变化、但是 hash 的变化不会触发新的 URL 请求）。
在实现 SPA 过程中，最核心的技术点就是前端路由。

1.2 前端路由的初体验

前端路由是基于 hash 值的变化进行实现的（比如点击页面中的菜单或者按钮改变 URL 的 hash 值，根据 hash 值的变化来控制组件的切换）。
核心实现依靠一个事件，即监听 hash 值变化的事件。

 // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function () {
    // 通过 location.hash 获取到最新的 hash 值
    console.log(location.hash);
}

案例：前端路由实现 tab 栏切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例：前端路由实现 tab 栏切换</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
</head>

<body>
    <!-- 被 vue 实例控制的 div 区域 -->
    <div id="app">
        <!-- 切换组件的超链接 -->
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>

        <!-- 根据 :is 属性指定组件名称，把对应的组件渲染到 component 标签所在的位置 -->
        <!-- 可以把 component 标签当做是【组件的占位符】 -->
        <component :is="comName"></component>
    </div>

    <script>
        // #region 定义需要被切换的 4 个组件
        // 主页组件
        const zhuye = {
            template: '<h1>主页信息</h1>'
        };

        // 科技组件
        const keji = {
            template: '<h1>科技信息</h1>'
        };

        // 财经组件
        const caijing = {
            template: '<h1>财经信息</h1>'
        };

        // 娱乐组件
        const yule = {
            template: '<h1>娱乐信息</h1>'
        };
        // #endregion

        // #region vue 实例对象
        const vm = new Vue({
            el: '#app',
            data: {
                comName: 'zhuye'
            },
            // 注册私有组件
            components: {
                zhuye,
                keji,
                caijing,
                yule
            }
        });
        // #endregion

        // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function () {
            // 通过 location.hash 获取到最新的 hash 值
            console.log(location.hash);
            switch (location.hash) {
                case '#/zhuye':
                    vm.comName = 'zhuye';
                    break;
                case '#/keji':
                    vm.comName = 'keji';
                    break;
                case '#/caijing':
                    vm.comName = 'caijing';
                    break;
                case '#/yule':
                    vm.comName = 'yule';
                    break;
            }
        }
    </script>
</body>

</html>

核心思路：
在页面中有一个 vue 实例对象，vue 实例对象中有四个组件，分别是 tab 栏切换需要显示的组件内容，在页面中有四个超链接，如下：

<a href="#/zhuye">主页</a> 
<a href="#/keji">科技</a> 
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>

当我们点击这些超链接的时候，就会改变 url 地址中的 hash值，当 hash 值被改变时，就会触发 onhashchange 事件，在触发 onhashchange 事件的时候，我们根据 hash 值来让不同的组件进行显示：

        // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function () {
            // 通过 location.hash 获取到最新的 hash 值
            console.log(location.hash);
            switch (location.hash) {
                case '#/zhuye':
                    vm.comName = 'zhuye';
                    break;
                case '#/keji':
                    vm.comName = 'keji';
                    break;
                case '#/caijing':
                    vm.comName = 'caijing';
                    break;
                case '#/yule':
                    vm.comName = 'yule';
                    break;
            }
        }

2、vue-router 的基本使用

2.1 Vue Router 简介

Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器，是一个功能更加强大的前端路由器，推荐使用。
它和 Vue.js 的核心深度集成，可以非常方便的用于SPA(single page web application，单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router。

Vue Router 包含的功能有：

支持 H5 历史模式或者 hash 模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

2.2 vue-router 的基本使用

2.2.1 基本使用步骤

引入相关的库文件
添加路由链接
添加路由填充位
定义路由组件
配置路由规则并创建路由实例
把路由挂载到 Vue 根实例中

1. 引入相关的库文件

<!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 -->
<script src="./lib/vue_2.5.22.js"></script>
<!-- 导入 vue-router 文件，为全局 window 对象挂载 VueRouter 构造函数 -->
<script src="./lib/vue-router_3.0.2.js"></script>

2. 添加路由链接

<!-- router-link 是 vue 中提供的标签，默认会被渲染为 a 标签 -->
<!-- to 属性默认会被渲染为 href 属性 -->
<!-- to 属性的值默认会被渲染为 # 开头的 hash 地址 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

3. 添加路由填充位

<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 -->
<router-view></router-view>

4. 定义路由组件

var User = {
	template: '<div>User</div>'
}
var Register = {
	template: '<div>Register</div>'
}

5. 配置路由规则并创建路由实例

// 5. 配置路由规则并创建路由实例
// 创建路由实例对象
const router = new VueRouter({
    // routes 是路由规则数组
    routes: [
        // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
        // path 表示当前路由规则匹配的 hash 地址
        // component 表示当前路由规则对应要展示的组件
        { path: '/user', component: User },
        { path: '/register', component: Register }
    ]
});

6. 把路由挂载到 Vue 根实例中

// 6. 把路由挂载到 Vue 根实例中
const vm = new Vue({
    // 指定控制的区域
    el: '#app',
    data: {},
    // 挂载路由实例对象
    // router: router
    router
});

2.2.2 路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

var router = new VueRouter({
	routes: [
		// 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址
		{path:'/', redirect: '/user'},
		{path:'/user',component: User},
		{path:'/register',component: Register}
	]
});

3、vue-router 嵌套路由的用法

3.1 嵌套路由功能分析

点击父级路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容

在这里插入图片描述

3.2 父路由组件模板

父级路由链接
父组件路由填充位

<!-- 被 vm 实例所控制的区域 -->
<div id="app">
    <!-- 2. 添加路由链接 -->
    <router-link to="/user">User</router-link>
    <router-link to="/register">Register</router-link>
    <!-- 3. 添加路由填充位 -->
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

3.3 子级路由模板

子级路由链接
子级路由填充位

 const Register = {
     template: `
         <div>
             <h1>Register 组件</h1>
             <hr/>
             <!-- 子路由链接 -->
             <router-link to="/register/tab1">tab1</router-link>
             <router-link to="/register/tab2">tab2</router-link>
             <!-- 子路由的占位符 -->
             <router-view />
         </div>
     `
 }

4. 嵌套路由配置

父级路由通过 children 属性配置子级路由

// 5. 配置路由规则并创建路由实例
// 创建路由实例对象
const router = new VueRouter({
    // routes 是路由规则数组
    routes: [
        // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
        // path 表示当前路由规则匹配的 hash 地址
        // component 表示当前路由规则对应要展示的组件
        // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址
        { path: '/', redirect: '/user' },
        { path: '/user', component: User },
        {
            path: '/register',
            component: Register,
            children: [
                { path: '/register/tab1', component: Tab1 },
                { path: '/register/tab2', component: Tab2 }
            ]
        }
    ]
});

完整的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 1. 引入相关的库文件 -->
    <!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <!-- 导入 vue 文件，为全局 window 对象挂载 Vue 构造函数 -->
    <script src="./lib/vue-router_3.0.2.js"></script>
</head>

<body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
        <!-- 2. 添加路由链接 -->
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>

        <!-- 3. 添加路由填充位 -->
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>

    <script>
        // 4. 定义路由组件
        const User = {
            template: '<h1>User 组件</h1>'
        }

        const Register = {
            template: `
                <div>
                    <h1>Register 组件</h1>
                    <hr/>
                    <!-- 子路由链接 -->
                    <router-link to="/register/tab1">tab1</router-link>
                    <router-link to="/register/tab2">tab2</router-link>
                    <!-- 子路由的占位符 -->
                    <router-view />
                </div>
            `
        }

        const Tab1 = {
            template: '<h3>tab1 子组件</h3>'
        }

        const Tab2 = {
            template: '<h3>tab2 子组件</h3>'
        }

        // 5. 配置路由规则并创建路由实例
        // 创建路由实例对象
        const router = new VueRouter({
            // routes 是路由规则数组
            routes: [
                // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
                // path 表示当前路由规则匹配的 hash 地址
                // component 表示当前路由规则对应要展示的组件
                // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址
                { path: '/', redirect: '/user' },
                { path: '/user', component: User },
                {
                    path: '/register',
                    component: Register,
                    children: [
                        { path: '/register/tab1', component: Tab1 },
                        { path: '/register/tab2', component: Tab2 }
                    ]
                }
            ]
        });

        // 6. 把路由挂载到 Vue 根实例中
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {},
            // 挂载路由实例对象
            // router: router
            router
        });
    </script>
</body>

</html>

4、vue-router 动态路由匹配

4.1 动态匹配路由的基本用法

应用场景：通过动态路由参数的模式进行路由匹配

var router = new VueRouter({
	routes: [
		// 动态路径参数 以冒号开头
		{ path: '/user/:id', component: User }
	]
});

const User = {
	// 路由组件中通过$route.params获取路由参数
	template: '<div>User {{ $route.params.id }}</div>'
}

4.2 路由组件传递参数

$route 与对应路由形成高度耦合，不够灵活，所以可以使用 props 将组件和路由解耦。

4.2.1 props 的值为布尔类型

const router = new VueRouter({
	routes: [
		// 如果 props 被设置为 true，route.params 将会被设置为组件属性
		{ path: '/user/:id', component: User, props: true }
	]
});

const User = {
	props: ['id'], // 使用 props 接收路由参数
	template: '<div>用户ID：{{ id }}</div>' // 使用路由参数
}

4.2.2 props 的值为对象类型

const router = new VueRouter({
	routes: [
		// 如果 props 是一个对象，它会被按原样设置为组件属性
		{ 
			path: '/user/:id', 
			component: User, 
			props: { uname: '李四', age: 12 }
		}
	]
});

const User = {
	props: ['uname', 'age'],
	template: ‘<div>用户信息：{{ uname + '---' + age}}</div>'
}

这种情况无法获取到 id 值，可以通过下面这种方法获取到。

4.2.3 props 的值为函数类型

const router = new VueRouter({
	routes: [
		// 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参
		{ 
			path: '/user/:id',
			component: User,
			props: route => ({ uname: '张三', age: 20, id: route.params.id })
		}
	]
});

const User = {
	props: ['uname', 'age', 'id'],
	template: ‘<div>用户信息：{{ uname + '---' + age + '---' + id}}</div>'
}

5、vue-router 命名路由

命名路由的配置规则：

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

const router = new VueRouter({
	routes: [
		{
			path: '/user/:id',
			name: 'user',
			component: User
		}
	]
});

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
router.push({ name: 'user', params: { id: 123 }})

6、vue-router 编程式导航

6.1 页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的 <a> </a> 链接或 vue 中的 <router-link></router-link>
编程式导航：通过调用 JavaScript 形式的 API 实现导航的方式，叫做编程式导航。
例如：普通网页中的 location.href

6.2 编程式导航基本用法

常用的编程式导航 API 如下：

this.$router.push('hash地址')
this.$router.go(n)

const User = {
	template: '<div><button @click="goRegister">跳转到注册页面</button></div>',
	methods: {
		goRegister: function(){
			// 用编程的方式控制路由跳转
			this.$router.push('/register');
		}
	}
}

6.3 编程式导航参数规则

router.push() 方法的参数规则

// 字符串(路径名称)
router.push('/home')
// 对象
router.push({ path: '/home' })
// 命名的路由(传递参数)
router.push({ name: '/user', params: { userId: 123 }})
// 带查询参数，变成 /register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi' }})

_Tough_Girl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
路由的基本概念与原理、vue-router 的基本使用、嵌套路由、动态路由匹配、命名路由、编程式导航

1、路由的基本概念与原理2、vue-router 的基本使用3、vue-router 嵌套路由4、vue-router 动态路由匹配5、vue-router 命名路由6、vue-router 编程式导航
复制链接

扫一扫