什么是Vue Router
Vue Router 是 Vue.js官方的路由管理器，簡單來說就是能夠跳轉(zhuǎn)到不同的url顯示不同的頁面违寞。
基本使用
創(chuàng)建Home.vue和Login.vue組件
//Home.vue
<template>
<div>
<h1>home</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是home 組件"
}
}
}
</script>
//Login.vue
<template>
<div>
<h1>login</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是login 組件"
}
}
}
</script>
創(chuàng)建router.js邓线，將不同的組件（components）映射到路由（routes）溺健。
//router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入組件Home和Login
import Home from '../view/Home.vue';
import Login from '../view/Login.vue';
Vue.use(VueRouter);
//定義路由
const routes = [
{path:'/home',commponent:Home},
{path:'/login'镊绪，component:Login},
{path: '/',redirect: '/home'}//把路徑'/'，重定向到'/home'
]
//創(chuàng)建router實例蜘醋，傳入routes
const router = new VueRouters({
mode:'hash',//默認是hash模式，可改成history和abstract模式
routes
})
export default router
在入口文件main.js中引入路由咏尝，注入到根實例中
//main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router.js';
//創(chuàng)建和掛載根實例
new Vue({
router,
render: h => h(App)
}).$mount('#app')
在App.vue中定義<router-link>和<router-view>
//App.vue
<template>
<div class="app">
<header>
// router-link 定義點擊導航后到哪個路徑下压语，默認會被渲染成一個<a>標簽
<router-link to="/home">Home</router-link>
<router-link to="/login">Login</router-link>
</header>
// 對應的組件內(nèi)容渲染到router-view中
<router-view></router-view>
</div>
</template>
