Vue2_16

Vue2_16（路由们）

1、路由概念

vue-router 插件 库！用于实现 SPA 应用

1.SPA是嘛

类似最近最近学的 软件测试，所给的测试页面

• 单页 Web 应用，只有一个 页面文件
• 点击导航链接 不会刷新页面
• 数据要 ajax 获取

2.路由是嘛

• 一个路由就是一对 key:value
• key 是路径，value 是 函数 或 组件
• 页面路径的切换，路由就会根据 路径 来找 value

3.路由分类

3.1 前端路由

value 是 组件 的路由，用于展示页面

当路径变换时，会把 key 对应的组件放到页面上

3.2 后端路由

value 是 函数 的路由，用于处理请求

当路径变换时，会直接发请求给服务器

2、路由的基本使用

1.导入vue-router

Vue2，导入3

npm i vue-router@3

2.配置路由器

步骤：

1. 创建一个路由器
2. 配置路由
3. 导出

2.1 创建路由器

import VueRouter from "vue-router";
const router =  new VueRouter(配置对象)

2.2 配置路由

配置属性 routes

const router =  new VueRouter({
	routes:[
		{
			path:'/about',
			component:MyAbout
		},
		{
			path:'/home',
			component:MyHome
		},
	]
})

• **path：**对应的路径
• **component：**对应的组件

但是会报错，说组件没定义，所有要导入组件

// 用于创建路由器
import VueRouter from "vue-router";
// 引入组件
import MyAbout from "../components/MyAbout.vue";
import MyHome from "@/components/MyHome.vue";	// tab出来de

// 创建一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:MyAbout
		},
		{
			path:'/home',
			component:MyHome
		},
	]
})

3.main.js

在最前面说：vue-router 插件 库！，库已经npm了，所以

3.1 使用 vue-router

import VueRouter from 'vue-router'
Vue.use(VueRouter);

3.2 配置 router

刚才会让 vm 都出一个属性 叫：router，用来放路由器

// 引入路由器,我放在了 router文件夹下的 index.js
import router from './router'	// 如果是index.js就可以不用写
new Vue({
	...
	router,	// 简写
	...
}).$mount('#app')

4.组件的应用

4.1 router-link

router-link，改地址的

<!-- router-link: 代替a标签，最终页面上就是 a标签 -->
<router-link class="in" active-class="active" to="/about">About</router-link>
<router-link class="in" active-class="active" to="/home">Home</router-link>

标签上的属性：

• **active-class：**点击后添加的 class
• **to：**跳转的地址

4.2 router-view

router-view，放组件的

<!-- 指定组件的位置 -->
<router-view></router-view>

5.注意事项

5.1 路由组件

这些由路由指定的组件叫：路由组件

路由组件的文件夹一般不在 components 里，会给它放进 pages 文件夹里

// 引入组件
import MyAbout from "../pages/MyAbout.vue";
import MyHome from "@/pages/MyHome.vue";	// tab出来de

5.2 路由组件的生命周期

答：切换了就被销毁，而不是什么 v-show之类的

5.3 路由组件的新属性

• $route: Object 是组件身上的东西
• $router: VueRouter 是路由器

所有路由组件的 $router 都是指向同一个地方的

3、多级路由

1.children属性

放在路由里，值是数组，用来放子路由

{
    path:'/home',
    component:MyHome,

    children:[
        {path:'news',component:InNews},
        {path:'message',component:InMessage}
    ]
},

注：不要在子路由里的路径加 ‘/’ 因为已经自动带了 ‘/’

2.组件设置

还是 <router-link> 和 <router-view>，只是改了 to 的值

<template>
	<div>
		<h2>我是 Home 的内容</h2>
		<router-link active-class="active" class="News inin" to="/home/news">News</router-link>
		<router-link active-class="active" class="Message inin" to="/home/message">Message</router-link>
		<hr class="inhr">

		<router-view></router-view>
	</div>
</template>

注：to 要加父路由的路径

4、路由传递参数

怎么传？答：查询字符串

<router-link :to="`/home/message/youjian?id=${msg.id}&tilte=${msg.title}`">
    Message{{ msg.id }}
</router-link>

to 的解释：:to="`/home/message/youjian?id=${msg.id}&tilte=${msg.title}`"

• “” 里有 ` 传递字符串
• js 语法：v-bind
• ${xxx}：传递的数据

4.1 to 的对象写法

<!-- 对象写法 -->
<router-link 
:to="{
    path:'/home/message/youjian',
    query:{
        id:msg.id,
        tilte:msg.title,
    }
}"
    >Message{{ msg.id }}
</router-link>

• **path：**组件的最终路径
• **query：**查询字符串（传递的数据）

4.2 获取传递的数据

在哪获取？答：在 $route.query 身上

<li>消息编号:{{ $route.query.id }}</li>
<li>消息标题:{{ $route.query.title }}</li>

5、命名路由

用名字代替路径

使用方法：在 配置对象 和 router-link 都加上个 name

{
    name:'youjian',
    path:'youjian',
    component:YouJian
},

:to="{
    // Path:'/home/message/youjian', 不需要写一堆路径了
    name:'youjian',
    query:{
        id:msg.id,
        tilte:msg.title,
    }
}"

6、路由传递参数2

使用 params 获取，写在下一级路径里

6.1 配置路由

格式：:xxx

path:'youjian/:id/:title',

这个 xxx 就是用来 . 的名字 $route.params.xxx

6.2 path 传递

path:`/home/message/youjian/${msg.id}/${msg.title}`,

6.3 params 配置对象

和 query 配置对象一样，但是不一样的是：只能在使用 name 时写

:to="{
	// 不能用path
    // path:`/home/message/youjian`,
    name:'youjian',
    params:{
        id:msg.id,
        title:msg.title,
    }
}"

6.4 接收参数

和 query 配置对象一样，但是不一样的是：没啥不一样的

<li>消息编号:{{ $route.params.id }}</li>
<li>消息标题:{{ $route.params.title }}</li>