怎么在vue項目中使用路由(vue中路由的使用)
1：vue-router
（1）是基于路由和組件的
路由由用于設定訪問路徑，將路徑和組件映射進來。
在vue-router的單頁面應用中，頁面的路徑的改變就是組件的切換。
2：安裝
npm install vue-router --save:3使用
3：使用
在模塊化工程中使用它，因為它是一個插件，所以可以通過Vue.use()來安裝路由功能。
第一步：導入路由對象 并且調用Vue。use（VueRouter）
第二步：創建路由實例，并且傳入路由映射配置
第三步：在Vue實例中掛載創建的路由實例
4：實際配置
安裝完會多一個文件夾
5：項目實戰
1：導入路由
import Vue from 'vue' // 想使用Vue 上邊在引入vue
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import App from "../App";
2：通過Vue.use(路由對象)
Vue.use(Router)
3：創建路由對象
export default new Router({
// 配置路由和組件的應用關系
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
4：將Router傳入到vue實例中，掛載上
// 在main.js頁面掛載
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '
6：子路由（配置路由和組件之間的應用關系）
// 第一步：創建路由組件
import HelloWorld from '@/components/HelloWorld'
// 第二步：引入
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
7：使用路由
通過:
1：
routes: [
{
path: '/',
redirect: '/home'
}
]
8：傳遞參數
9：去掉路徑后面#
http://localhost:8081/#/home
默認是hash模式.，怎么改成history？
mode: 'history'
export default new Router({
routes: [],
mode: 'history'
})
10：router-link 別的屬性
tag: 可以指定router-link之后渲染成什么組件，比如上面的代碼被渲染成li、
而不是a（默認是a）
replace:不會留下history記錄，所以指定replace的情況下，后退鍵不能返回到上一個頁面。
active-class：當路由匹配成功的時候會加一個class。
11：通過點擊事件跳轉路由。
this.$router.push('/home')
this.$router.replace('/home')
