官網地址：https://router.vuejs.org/zh/ 先來個自我介紹吧，我就是你們口中的路由，我的作用就是告訴你們怎麼到達某地，比如你想去一個地方（前提是這個地方是已經存在的）我會查詢我的路線圖（路由配置）告訴你怎麼過去。明白了吧，我的作用就是給你們導航的，有了我的存在，你們不用在詳細 ...
官網地址：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.怎麼動態定義路由
在上一節我們定義路由的方式是一個路由對應一個組件，但是，當有符合某一條件下的所有路由都映射到同一個組件，這種路由要怎麼配置呢？比如，要把A-Z組件全部映射到Alphabet組件。
這個時候就可以用動態路由解決這個問題。
先創建一個Alphabet.vue組件
<template>
<div class="hello">
<ul>
<li>
this is <strong>{{ $route.params.letter }}</strong>
</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>
在路由配置文件中，新增如下配置：
{ path: '/alphabet/:letter', // 動態路由參數，以冒號開頭 name: 'Alphabet', component: Alphabet }
這樣配置生效後：
符合 /alphabet/** 的路徑全部都匹配到組件 Alphabet
運行效果如下：
到這裡，就完成了一個動態路由的配置與運行。
註意：動態路由一定要以冒號開始，冒號後面這個字元串是參數，當匹配到一個路由是，這個值會配置設置到 this.$route.params 之中，可以在映射到的任何一個組件內使用。像我們在程式中寫的那樣，通過 $route.params.letter 可以拿到路徑中匹配到的參數值。
| 匹配模式 | 匹配路徑 | 參數值($route.params.letter) |
| /alphabet/:letter | /alphabet/a | a |
2.路由中怎麼傳遞參數
在動態設置路由中也達到了傳遞參數的目的，但是這並不是正確的傳遞參數的姿勢，只是得到了路徑中的一個url節點。用這種方式傳遞參數比較局限。
我們下麵介紹另一種傳遞參數的方式，在介紹這種方式之前，需要先瞭解一個組件：router-link
3.路由命名有什麼用
