什麼是路由
vue路由是可以通過組件的形式把所有的組件組裝成爲一個應用程序，當我們需要的時候，將這個組件映射到路由，然後告訴Vue 我們在哪裏渲染它們。
路由是我們瀏覽器的一個地址。
vue路由的優缺點
當我們加載一個程序時，由於它加載的內容特別多，所以會比較緩慢，但是我們加載完之後，我們到頁面裏進行切換，它的切換速度會變得特別快。原因是因爲我們將所有的程序都放在一個頁面裏面了，我們將它加載時所有的功能所有的主鍵都加載到一個頁面去了，所以它加載的速度特別慢，但是加載完之後我們再進行後續的操作時，它的切換速度和反應速度回特別快。
路由配置安裝
路由最主要的配置是在於切換和跳轉頁面這兩個方面。
- 路由配置
- 動態效果
- 命名路由
- 嵌套路由
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Vue 路由的配置</title>
<head>
<meta charset="utf-8">
<title>Vue 內置指令</title>
<script src="Vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: #F4F5F6;
}
a {
text-decoration: none;
color: #000;
}
#main {
width:980px;
margin: 0 auto;
margin-top: 80px;
}
#main-left {
width: 180px;
float: left;
}
#main-left a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
#main-right {
width: 730px;
float: right;
background: #fff;
padding: 20px;
}
.active {
color: #007Aff !important;
}
</style>
</head>
<body>
<div id="main">
<!-- 導航欄 -->
<div id="main-left">
<router-link to="/home" @click.native="changeIndex(1);" :class="{active : index == 1}">網站首頁</router-link>
<router-link to="/about" @click.native="changeIndex(2);" :class="{active : index == 2}">關於我們</router-link>
</div>
<!-- 對應顯示的內容 -->
<div id="main-right">
<router-view></router-view>
</div>
</div>
</body>
<script>
// 定義組件模塊
const Home = { template: '<div><h1>Vue</h1><p>Vue課程</p></div>' };
const About = { template: '<div><div><router-link to="/about/ha">關於內容</router-link> | <router-link to="/home/hb">關於課程</router-link></div>' };
const Ha = { template: '<div><h1>關於內容</h1><p>關於內容........</p></div>'};
const Hb = { template: '<div><h1>關於課程</h1><p>關於課程........</p></div>'};
// 定義路由
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home},
{
path: '/about',
component: About,
children: [
{
path: 'ha',
component: Ha
},
{
path: 'hb',
component: Hb
}
]
},
]
});
// 創建vue實例並使用路由配置
var vm = new Vue({
router,
data: {
index: 1
},
methods: {
changeIndex: function(index) {
this.index = index;
}
}
}).$mount('#main');
</script>
</html>