Vue路由学习

                               Vue路由学习

目标

1. 路由概念学习

2. Vue-router基本使用

3. Vue-router嵌套路由

4. Vue-router动态路由

5. Vue-router路由命名

6. Vue-router编程是导航用法

7. 基于路由的方式实现业务功能

一、路由概念

1.1、前端路由：

概念：根据不同的用户事件，显示不同的页面内容

本质：用户事件与事件处理函数之间的对应关系

作用：提高用户对网站的体验

1.2、Vue Router

Vue官方提供的路由管理器，路由和Vue.js的核心深度集成，可以非常方便的用于SPA项目开发。

说白了就是根据不同的路径显示不同的页面SPA单页面应用程序：整个页面SPA(Single PageApplication）

单页面应用程序:整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作。

SPA实现原理之一:基于URL地址的hash (hash的变化会导致浏览器记录访问历史的变化、但是haln的变化不会触发新的URL请求)。

在实现SPA过程中，最核心的技术点就是前端路由。

Vue Router包含的功能有：

1、支持HTML5历史模式或者hash模式(实现路由的常用方式)

2、支持嵌套路由

3、支持路由参数

4、支持编程式路由

5、支持命名路由

二、Vue-router基本使用

0、基本使用步骤

1、引入相关的库文件

2、添加路由链接

3、添加路由填充位

4、定义路由组件

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

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

以下是非脚手架结构学习

1、引入相关库文件

<!-- 导入Vue文件,用于为全局对象Window挂载 Vue构造函 数 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue .js"> 
</script> 
<!-- 导入vue-router文件， 用于为全局对象Window挂载 vue-router构造函数 -->
<script src="https://unpkg.com/vue- router/dist/vue-router.js">
</script>

　　

2、添加路由链接

<!--router-link是Vue中提供的标签,默认会被渲染为 a标 签 -->
<!-- to 属性默认会被渲染成 href属性 -->
<!-- to 属性的值 默认会被渲染成 #开头的hash地址 -->
<router-link to="/tom">Tom</router-link> 
<router-link to="/jerry">Jerry</router-link>

　　

3、添加路由填充位

路由填充位,也叫做路由占位符,通过路由规则匹配到的组

件,将会被渲染到router-view所在的位置

<router-view></router-view>

4、定义路由组件

定义路由跳转展示的内容组件

let Tom = {
 template : `<h1>Tom组件</h1>` 
};
let Jerry = { 
template : `<h1>Jerry组件</h1>` 
};

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

//用于配置路由规则的实例 
const router = new VueRouter({
 //存储所有的路由规则的数组 
routes: [ 
//path表示当前路由规则匹配的hash地址 
//component表示当前路由规则对应要展示的组件 
//注意component只接收组件对象 
{path : '/tom', component : Tom}, 
{path : '/jerry', component : Jerry} 
] });

　　

6、把路由挂载到Vue根实例中为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上

let app = new Vue({

el : "#app",

data : {},

methods: {},

//挂载实例对象

router : router

});

　　

7、测试效果

 

8、路由重定向

路由重定向指的是:用户在访问地址A的时候，强制用户跳转到地址B，从而展示特定的组件页面;

Vue实现思路：通过路由规则中的redirect属性 ，指定一个新的路由地址，可以很方便地设置路由的重定向

其中，path表示需要被重定向的原地址，redirect表示将要 被重定向到的新地址 
routes: [ 
{path : '/',redirect : '/tom'}, 
{path : '/tom', component : Tom}, 
{path : '/jerry', component : Jerry} 
]

三、嵌套路由

嵌套路由指的是通过路由规则的层级嵌套，可以在页面上展示出复杂的组件结构关系

2.1、嵌套路由用法

1、需求引入

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

2、实现思路

• 在父路由中添加子路由链接和路由占位符
• 配置路由规则，在父路由规则中，通过children属性，添加子路由规则

//在父路由中添加子路由链接和路由占位符
 let Jerry = {
 template : `<div> <h1>Jerry组件</h1> 
 <hr/> 
<!-- 子路由链接-->
<router-link to="/jerry/j1">j1</router-link> 
<router-link to="/jerry/j2">j2</router-link> 
<!-- 子路由占位符-->
<router-view /> </div>` };

　　

//省略创建子路由组件 
{ 
//children数组表示子路由规则
 path : '/jerry', component : Jerry, 
 children : [
 {path : '/jerry/j1',component : j1}, 
 {path : '/jerry/j2',component : j2}
 ] }

三、动态路由匹配

3.1、动态路由基本使用

思考：有以下3个路由链接

<router-link to="/tom/1">Tom1</router-link> 
<router-link to="/tom/2">Tom2</router-link> 
<router-link to="/tom/3">Tom3</router-link> 
<router-link to="/tom/4">Tom4</router-link>

定义如下路由规则，是否可行？如果有更多又该如何？

{path : '/tom/1',component : Tom}
{path : '/tom/2',component : Tom} 
{path : '/tom/3',component : Tom} 
{path : '/tom/4',component : Tom}

什么是动态路由参数：

如果某些路由规则中，一部分是完全一样的，一部分是动态变化的，那么就可以将这部分动态变化的部分形成动态路由参数。

 

实现方式：通过动态路由参数的模式进行路由匹配

如果进行动态参数匹配语法实例： 
routes: [ {path : '/tom/:id', component : Tom},
 ]　

路由组件通过$route.params 获取路由参数

路由中如何使用动态参数语法实例：
 template: `
<div>{{$route.params.id}}</div>`　

分析共性，抽出公用路由，设置参数，获取使用

3.2、路由组件传递参数---props

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

1、用法1：props设置布尔类型

将props 设置为true , 开启props传参

routes: [
 {path : '/tom/:id', component : Tom,props : true},
 ]

//路由组件 
props : ['id'], 
//使用路由参数
 template : `<h1>Tom组件{{id}}</h1>`

2、props的值为对象类型

将props 设置为对象,它会被按原样设置为组件属性。只会传递对象数据

{path : '/tom/:id', component : Tom,
props : {name : 'zs'}}
props : ['name'],
 template : `<h1>Tom组件{{$route.params.id}} {{name}}</h1>`　

3、props的值为函数

将props 设置为函数,将静态值与基于路由的值结合动态传参可以使用 route.params获取

{path : '/tom/:id', component : Tom, 
props:route => ({name : '张三',id : route.params.id})},

props : ['name','id'], 
template : `<h1>Tom组件{{id}} {{name}}</h1>`

四、命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

语法:使用name关键字 进行命名

routes: [
 { path: '/user/:userId', name: 'user', component: User }
 ] 
})

在路由链接中使用 :to属性设置链接的地址,并且可以使用

params携带参数

<router-link 
   :to="{ name: 'user',params: { userId: 123
 }}">User 
</router-link>

五、编程式导航

5.1、页面导航的两种方式

1.声明式导航:通过点击链接实现导航的方式，叫做声明式导航

    例如:普通网页中的a链接或vue中的

2.编程式导航:通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

     例如:普通网页中的location.href

5.2、Vue实现编程式导航

常见编程式导航Api如下：

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

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