Vue中路由的两大参数

路由的注意事项

路由如何展示？

要弄清楚各级级路由是怎么展示到页面上的
总的来说：都是通过以下标签展示到页面上的

<route-view>route-view>
1

一级路由最好做一个重定向，否则，一级路由的跳转位置就在index.js中routes的第一个path中

路由如何跳转？

路由跳转组件：

<route-link>route-link>
1

跳转组件 + 展示组件 就能实现路由的选择跳转

<router-link  to="/about">Aboutrouter-link>
<router-link  to="/home">Homerouter-link>
<route-link>跳转route-link>
1
2
3

嵌套路由的写法

把想在页面上展示出来的地方写在他的子路由中，根据route-link这个标签（点击标签），让这个子路由展示在页面上。

query参数

携带参数

to的字符串写法：

死数据：

<router-link to="/home/message/detailed?id=520?title=标题?username=管理员">router-link>
1

to的对象写法：

	<router-link :to="{
// 既然是最终跳转到detailed界面，那就该在前一个路径里面写跳转，即：message
		path:'/home/message/detailed',
		query:{
			id:520,
			title:标题,
			username:管理员
		}
	}">
		点击就能跳转
	router-link>
1
2
3
4
5
6
7
8
9
10
11

实例：根据页面展示出来的数据去跳转出不同的路由

展示的数据准备：

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				
				{m.title}}   -->

				
				<router-link :to="{
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				router-link>
			
			li>
		ul>
		<hr>
		<router-view>router-view>
	div>
template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'520',title:'早安'},
					{id:'502',title:'晚安'},
					{id:'250',title:'午安'}
				]
			}
		},
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

param + name 实现便捷传递参数

index.js文件中的routes
除了path，componen还有name

name（给路由命名）

简化前：

<router-link to="/demo/test/welcome">跳转</router-link>
1

在main.js中给路由命名

export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/demo',
			component:Demo,
			children:[
				{
					path:'test',
					component:Test,
				},
				{
					path:'welcome',
					component:Message,
					children:[
						{
							name:'simple',
							//使用占位符声明接收params参数
							path:'detail/:id/:title',
							component:Detail,
						}
					]
				}
			]
		}
	]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

简化后：

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'simple'}">跳转</router-link>
1
2

or

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'simple',
		param:{
		   id:530,
            title:'标题'
		}
	}"
>跳转</router-link>
1
2
3
4
5
6
7
8
9
10

接收参数：

$route.params.id
$route.params.title
1
2

v-bind 给属性绑定指令

比如：在data中给photo写了一个地址，想通过img渲染到页面上
错误写法：

<img src="photo" alt=""></img>
1

正确写法：

<img v-bind:src="phtot" alt=""></img>
1

简写为：

<img :src="phtot" alt=""></img>
1