vue-router學習筆記

vue-router安裝

方法一： 在vue-cli項目建立時，就會提示是否須要安裝vue-router

方法二： 在項目文件夾下使用npm安裝

npm install vue-router

方法三：在vue或者html文件中引入vue-router.js

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

動態路由

動態路由主要是不一樣的url加載同個一組件。在項目中常常會碰到不一樣內容可是相同的渲染結構，那麼就能夠經過向後臺發送動態的url來獲取不一樣的內容。

目錄結構

配置路由 在router/index.js中

import Vue from 'vue'
// 引入router
import Router from 'vue-router'
// 加載組件
import a from '../views/a'
// 使用路由
Vue.use(Router)
// 在path中 用：表示參數是動態的
// component 表明加載到相應路由上後所使用的組件
const routes = [
  {
    path: '/:nameId',
    component: a
  }
]
// 暴露路由接口
export default new Router({
  routes
})

在App.vue中所加載的組件會被渲染到<router-view></router-view>容器中

<div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>

在a.vue組件中，能夠經過$route.params來得到路由參數，返回的是一個對象，不管中間是否有固定的參數，只返回路徑中用：來定義的動態參數。

注意：此時用的是$route

<template>
  <div>這是a視圖{{$route.params.nameId}}</div>
</template>

嵌套路由

嵌套路由，顧名思義就是大組件中嵌套小組件。在路徑上/parent/brother和/parent/sister前面都是加載到/parent是相同的。最好理解的就是導航欄的跳轉。

目錄結構

配置路由 在router/index.js中,說明：HelloWorld是a組件與b組件的父組件

import Vue from 'vue'
// 引入router
import Router from 'vue-router'
// 加載子組件
import a from '../views/a'
import HelloWorld from '../components/HelloWorld'
import b from '../views/b'
// 使用路由
Vue.use(Router)
// 在path中 用：表示參數是動態的
const routes = [
  {
    path: '/hello',
    component: HelloWorld,
    children: [
      {
        path: 'a',
        component: a
      },
      {
        path: 'b',
        component: b
      }
    ]
  }
]
// 暴露路由接口
export default new Router({
  routes
})

將子組件的配置寫在父組件的children中，其中子組件path的配置不能夠加上反斜槓，由於反斜槓是絕對路徑。會讓/hello/a變成/a
另外要在父組件中加入<router-view>

編程式路由

顧名思義，就是經過JS來控制路由的跳轉。

相關函數
$router.push(「name」);
$router.push({path:」name」});
$router.push({path:」name」?a=123}); //傳參
$router.push({path:」name」，query:{a=123}});
$router.go();
參數查詢：$route.query.[參數名]

在router/index.vue中進行配置

<template>
  <div>
    <button @click="clickBtn">點擊加載a視圖</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    clickBtn () {
    // 注意，這裏必定要將路徑寫全，要寫絕對路徑。
      this.$router.push('/hello/a')
    }
  }
}
</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>

注意，在push中要將路徑寫全，push不會對路徑進行字符串拼接

注意看兩張圖的URL

pash方法中也能夠傳入一個對象

methods: {
    clickBtn () {
      this.$router.push({path: '/hello/a', query: { id: '123' }})
    }
  }

在子組件中咱們用 $route.query.[參數名] 來獲取參數
在a.vue子組件中，代碼以下

<template>
 <div>
   <div>這是子組件</div>
   <div>得到的參數id：{{$route.query.id}}</div>
 </div>
</template>

..]

值得注意的是，與動態路由用$route.params獲取參數不一樣，編程式路由是用$route.query來獲取
params與query均可以向後臺發送請求，將參數傳遞過去。可是params中傳參必須要在路由中進行參數名的配置，可是query就沒有這個要求，不管傳參多少個都沒有問題。可是query會將全部的信息顯示在url上，有點像get請求。而query則有點像post請求，在url上面不會顯示參數名。params是路由的一部分,必需要有。query是拼接在url後面的參數，沒有也不要緊。

命名路由

路由的命名其實就是更語義化了。
對路由的配置

import Vue from 'vue'
// 引入router
import Router from 'vue-router'
// 加載子組件
import a from '../views/a'
import HelloWorld from '../components/HelloWorld'
import b from '../views/b'
// 使用路由
Vue.use(Router)
// 在path中 用：表示參數是動態的
const routes = [
  {
    path: '/hello',
    component: HelloWorld,
    children: [
      {
        path: 'a',
        name: 'a',
        component: a
      },
      {
        path: 'b',
        name: 'b',
        component: b
      }
    ]
  }
]
// 暴露路由接口
export default new Router({
  routes
})

注意在命名的時候，若是不是變量要記得帶引號，命名是字符串形式。
在父組件中也能夠傳參給子組件
在父組件HelloWorld.vue中

<template>
  <div>
    <router-link :to="{ name: 'a', params: { id: 123 }">點擊加載a視圖</router-link>
    <router-view></router-view>
  </div>
</template>

千萬注意，這裏要用 :to或者v-bind:to來代替to,name必需與路由配置中的命名同樣。
在子視圖a.vue中用params接受參數

<template>
 <div>
   <div>這是子組件</div>
   <div>得到的參數id：{{$route.params.id}}</div>
 </div>
</template>

命名視圖

當一個父視圖中要同時放下兩個子視圖的時候，就能夠用多個name不一樣的<router-view>來存放不一樣的視圖。

import Vue from 'vue'
// 引入router
import Router from 'vue-router'
// 加載子組件
import a from '../views/a'
import HelloWorld from '../components/HelloWorld'
import b from '../views/b'
// 使用路由
Vue.use(Router)
// 在path中 用：表示參數是動態的
const routes = [
  {
    path: '/hello',
    components: {
      default: HelloWorld,
      one: a,
      two: b
    }
  }
]
// 暴露路由接口
export default new Router({
  routes
})

特別注意，此時用的是components，而不是component。另外，default表示當父組件中的<router-view>沒有命名時，默認存放的組件。
組件HelloWorld.vue、a.vue、b.vue大體相同

<template>
  <div>
    <div>這裏是hello組件</div>
  </div>
</template>

父組件中：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <router-view name="one"></router-view>
    <router-view name="two"></router-view>
  </div>
</template>

每一個組件存放的容器名字都要與路由配置中的相一致。

$$ 在編寫代碼的時候，遇到報錯：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
是說明在<template>下只能有一個元素。通常結構是

<template>
  <div id="app">
  </div>
</template>