CRainyDay

vue中的路由简介

什么是路由?

怎么使用路由?

1. SPA 与 MPA

SPA: 单页Web应用, 就是只有一张Web页面的应用(只请求一个html文件), 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序.

MPA: 每一次页面跳转时, 都会向后台服务器请求一个新的html文档, 这种类型的网站也就是多页网站, 也叫做多页Web应用.

在SPA中, 不会产生页面跳转, 但是一个页面中承载着很多功能页面(即组件), 只是更新显示不同的路由组件.

2.路由与路由器

路由器管理路由.

路由是什么? 可以说是键值对(即一种映射关系), key 是路径(即path), value: 对于后台来说是处理请求的回调函数, 对于前台来说是组件.

3.基本路由

基本步骤:

  • ①先在项目src创建main.js和App.vue.
  • ②从这之后vue组件分为: 非路由组件(一般放在/src/components下)和路由组件(一般放在/src/views或/src/pages目录下).
  • ③这里在views目录下, 创建路由组件About.vue和Home.vue, 里面随便写点要显示的东西.
  • ④创建文件/src/router/index.js 或/src/router.js, 在里面配置路由, 如下方代码.
  • ⑤在 main.js 中配置路由器, 如下方代码.
  • ⑥在页面组件对应地方生成路由连接 router-link.
  • ⑦在页面组件对应地方指定要显示的路由组件 router-view.

router.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from './views/About'
import Home from './views/Home'
Vue.use(VueRouter)
export default new VueRouter({//向外暴露路由对象即路由器
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home
},
{
path: '/',
redirect: '/about'
}
]
})

main.js:

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
components: {
App
},
template: '<App/>',
router
})

App.vue:

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
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Router Test</h2></div>
</div>
</div>

<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!--生成路由链接-->
<router-link to="/about" class="list-group-item">About</router-link>
<router-link to="/home" class="list-group-item">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!--显示上面路由链接对应的路由组件-->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
}
</script>

<style scoped>
.router-link-active {
color: red !important;
}
</style>

编写使用路由实际上只有3步:

  • ①编写路由组件

  • ②定义路由

  • ③使用路由: router-link和router-view标签. (这里注意keep-alive标签)

keep-alive标签: 保存 router-view 显示的组件, 在切换组件时, 不销毁之前的组件.

4.嵌套路由

嵌套路由: 顾名思义, 在路由组件中在嵌套其他路由组件.(可以多层嵌套)

  • ①先定义路由组件News.vue和Message.vue
  • ②定义路由(或称注册路由). 修改router.js. 之前已经配置过了路由器. 没有配置的自行配置.
  • ③在Home.vue中使用路由.

Vue4-1.1

News.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<ul>
<li v-for="(news, index) in newsArr" :key="index">{{news}}</li>
</ul>
</template>

<script>
export default {
data () {
return {
newsArr: ['news001', 'news002', 'news003', 'news004']
}
}
}
</script>

<style scoped>

</style>

Message.vue:

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
<template>
<ul>
<li v-for="m in messages" :key="m.id">
<a href="javascript:;">{{m.title}}</a>
</li>
</ul>
</template>

<script>
export default {
data () {
return {
messages: []
}
},
mounted () {
setTimeout(() => {
//模拟ajax请求
const messages = [
{id: 1, title: 'messages001'},
{id: 3, title: 'messages003'},
{id: 4, title: 'messages004'}
]
this.messages = messages
}, 1000)
}
}
</script>

<style scoped>

</style>

router.js:

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
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from './views/About'
import Home from './views/Home'
import News from './views/News'
import Message from './views/Message'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [//定义home组件的子路由
{
path: '/home/news',
component: News
},
{
path: 'message',
component: Message
},
{//默认路由
path: '',
redirect: '/home/news'
}
]
},
{//默认路由
path: '/',
redirect: '/about'
}
]
})

Home.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<div>
<h2>Home</h2>
<div>
<ul class="nav nav-tabs">
<!--生成路由链接-->
<li><router-link to="/home/news">News</router-link></li>
<li><router-link to="/home/message">Message</router-link></li>
</ul>
<!--显示当前路由组件-->
<router-view></router-view>
</div>
</div>
</template>

<script>
export default {
name: 'Home'
}
</script>

<style scoped>

</style>

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有