1.引入vue-router
2. router-link 標(biāo)簽 ?切換錨點(diǎn)值 一定要寫to屬性贾铝，不然報(bào)錯(cuò)
3.?router-view 標(biāo)簽 切換組件的容器
4.初始化router路由對象
5.配置路徑(錨點(diǎn)值與組件的對應(yīng)關(guān)系)
6.在實(shí)例上掛載路由?
如果有子路由体谒，請往最后看Ｒ研丁Ｊ础峰伙！
7.demo:
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
? ? <!-- 1.引入vue-router -->
? ? <script src="./js/vue-router_3.0.2.js"></script>
</head>
<body>
? ? <div id="app">
? ? ? ? <!-- 2. router-link 標(biāo)簽 ?切換錨點(diǎn)值 一定要寫to屬性新翎，不然報(bào)錯(cuò)-->
? ? ? ? <router-link to="/login">login</router-link>
? ? ? ? <router-link to="/reg">reg</router-link>
? ? ? ? <router-link to="/indexCom">indexCom</router-link>
? ? ? ? <!-- 3. router-view 標(biāo)簽 切換組件的容器 -->
? ? ? ? <router-view></router-view>
? ? </div>
? ? <script>
? ? ? ? let login = {
? ? ? ? ? ? template: `
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h3>登錄</h3>
? ? ? ? ? ? ? ? ? ? <input type="text">
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? `
? ? ? ? }
? ? ? ? let reg = {
? ? ? ? ? ? template: `
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h3>注冊</h3>
? ? ? ? ? ? ? ? ? ? <input type="text">
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? `
? ? ? ? }
? ? ? ? let index = {
? ? ? ? ? ? ? ? template: `
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>首頁</h3>
? ? ? ? ? ? ? ? <p>個(gè)人信息</p>
? ? ? ? ? ? ? ? <input type="text"> ? ?
? ? ? ? ? ? </div> ?
? ? ? ? ? ? `
? ? ? ? ? ? }
? ? ? ? ? ? // 4.初始化router路由對象
? ? ? ? let router = new VueRouter({
? ? ? ? ? ? // 5.配置路徑(錨點(diǎn)值與組件的對應(yīng)關(guān)系)
? ? ? ? ? ? routes: [{
? ? ? ? ? ? ? ? path: '/login',
? ? ? ? ? ? ? ? component: login
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? path: '/reg',
? ? ? ? ? ? ? ? component: reg
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? path: '/indexCom',
? ? ? ? ? ? ? ? component: index
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? path: '/',
? ? ? ? ? ? ? ? redirect: '/indexCom'
? ? ? ? ? ? }]
? ? ? ? })
? ? ? ? const app = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {},
? ? ? ? ? ? // 6.在實(shí)例上掛載路由
? ? ? ? ? ? router: router
? ? ? ? })
? ? </script>
</body>
</html>
添加子路由：
最后附贈一個(gè)Vue-Router中常見的導(dǎo)航方式：
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
this.$router.go( n );//n為數(shù)字程帕，參考history.gothis.$router.go( -1 );? //用法類似于 history.go(-1)
