路由
(一) SPA(single page application)
- 后端渲染（存在性能问题，像提交表单就要重新渲染）
- Ajax前端渲染（不支持浏览器的前进后退的操作）
- SPA单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现
同时支持浏览器的地址的前进和后退操作。
- SPA实现原理之一：基于URL地址的hash(hash值得变化会导致浏览器访问记录的改变，但不会出发新的URL请求)
- 实现SPA核心技术：前端路由。
（二）Vue-router
1、基本使用步骤
- 引入相关库文件
- 添加路由链接(分别对应a标签 href #)
1
|
<router-link to='user'>User</router-link>
|
- 添加路由填充位:
1
|
<router-view></router-view>
|
通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
- 定义路由组件
- 配置路由规则并创建路由实例
1
2
3
4
5
6
|
const router=new VueRouter({
routes:[{
path:'/user'
component:User
}]
})
|
- 把路由挂载到Vue根实例中
1
2
3
4
5
6
|
const vm=new Vue({
el:'#app',
data:{},
//挂载路由实例对象
router
})
|
(三)重定向
1
2
3
4
5
6
7
|
const router=new VueRouter({
//所有的路由规则
routers:[
{path：'/',redirect:'/user'},
{path:'/user',component:User}
]
})
|
(四)动态匹配路由
1
2
3
4
|
解决路径前面一致要很多个路由
<router-link to='/user1'> 我是User1 <router-link>
<router-link to='/user2'>我是User2 <router-link>
<router-link to='/user3'> 我是User3<router-link>
|
//解决办法：
1
2
3
4
5
6
7
8
9
10
|
var router=new VueRouter({
routes:[{
path:'/user/:id',
component:User
}]
})
const User={
tempalte:<div>{{$route.params.id}}</div>
}
|
(五)路由嵌套
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='/User'>我是User1</router-link>
<router-link to='/Regsiter'>我是Regsiter</router-link>
<router-view><router-view>
配置路由:
var router=new VueRouter({
routes:[{
path:'/user'
component:'User'
},
{
path:'/regsiter'
component:'Regsiter',
children:[{
path:'/regsiter/tab1',
component:Tab1
},
{
path:'/regsiter/tab2',
component:Tab2
}]
}]
})
const Regsiter={
<h1>Regsiter<h1>
<router-link to='/regsiter/tab1'>tab1</router-link>
<router-link to='/regsiter/tab2'>tab2</router-link>
<router-view></router-view>
}
|
传参
- 子向父传参
- 非父子关系组件传参
- 路由实例向组件中传参
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
(1)props:true
const router=new vueRouter({
routes:[
path:'/user/id',
component:User,
props:true]
}),
var User={
props:['id'],
template:<div>ueser:{{id}}</div></div>
}
(2)props:对象
const router=new vueRouter({
routes:[path:'/user/id',
component:User,
props:{name:'wyy',age:17}]
}),
var User={
props:['name','age'],
template:<div>ueser:{{name}}--{{age}}]}</div></div>
(3)函数
|
导航
- 声明式导航：
1
|
<a></a> <router-link></router-link>
|
- 编程式导航：
1
2
3
|
常用的编程式导航API如下：
(1)this.$router.push('hash地址')
(2)this.$router.push.go(n)
|
近期评论