vue-router使用 看着篇就够了

官网地址：https://router.vuejs.org/zh/

先来个自我介绍吧，我就是你们口中的路由，我的作用就是告诉你们怎么到达某地，比如你想去一个地方（前提是这个地方是已经存在的）我会查询我的路线图（路由配置）告诉你怎么过去。明白了吧，我的作用就是给你们导航的，有了我的存在，你们不用在详细的记住每一条路线图，只需要记住要去的目的地名字就行了，至于怎么过去，那是我的事，你就不用操心了，完全按照我的指示就能又快有准的到达目的地。

对了，我还有三个助手，他们分别是：

1.router ：这位是我的指令官，他管理着所有的 route，当你需要指路时，他会召集所有的route，到routes集合，然后一个一个询问谁知道路线，直到找到那个route。如果找到了那个知道路线的route，router就派出他去为你导航，直至把你送到目的地。

2.routes：所有的路线route都在这里存放。

3.route：看名字也知道我是单数了，能力有限，我只能存放一条路线图。

认识了我的三位助手，对我也有个简单的认识了，下面进入实操环节。

--------分割线-----------

一：vue-router 初级应用

最终期望：在首页中点击对应的连接进入对应的组件。

在 components中新建三个组件 分别是：a、b、c

 

a:

<template>
<div class="hello">
<ul>
<li>
{{name}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
name: 'my name is a'
}
}
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
</style>

b:

<template>
<div class="hello">
<ul>
<li>
{{name}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
name: 'my name is b!'
}
}
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

c:

<template>
<div class="hello">
<ul>
<li>
{{name}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
name: 'my name is c!'
}
}
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

配置路由：

/router/index.js

import vue from 'vue'

import router from 'vue-router'

import helloworld from '@/components/helloworld'
import a from '@/components/a'
import b from '@/components/b'
import c from '@/components/c'
vue.use(router)
export default new router({
routes: [
{
path: '/',
name: 'helloworld',
component: helloworld
},
{
path: '/a',
name: 'a',
component: a
},
{
path: '/b',
name: 'b',
component: b
},
{
path: '/c',
name: 'c',
component: c
}
]
})

在 helloword.vue中引入a、b、c三个组件的连接

<template>
<div class="hello">
<ul>
<li>
<a href="/#/a">a</a>
</li>
<li>
<a href="/#/b">b</a>
</li>
<li>
<a href="/#/c">c</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
msg: 'welcome to your vue.js app'
}
}
}
</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

运行命令：npm run dev

打开网站运行一下：

 

到这里vue-router的初级应用就介绍完了，总结下，有三个部分的知识点

1.定义三个组件 a、b、c

2.在router/index.js文件中引入三个组件，并做相应的路由配置

3.在页面中添加3个a标签，分别跳转到对应的组件

这部分内容比较初级，只是对路由做了简单的演示，通过定义好的路由进入对应的组件，在我们平时开发中，涉及到的需求要比这复杂的多，后面的内容会慢慢加深难度，接下来开始讲解vue-router的进阶版：vue-router 中级应用，这部分内容分三个小节：

1.怎么动态定义路由

2.路由中怎么传递参数

3.路由命名有什么用