一、通過路由name屬性給導航傳參
紅色字體為增改內容！！！
1、新建src/router.js
2、src/main.js
//導入vue和新建的router.js
import Vue from 'vue'
import router from './router.js'
3、src/router.js
//導入vue和vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用vue-router（名稱為VueRouter，可以隨便取）
Vue.use(VueRouter)
//定義組件模板內容
const first = {template:'<div>這是first內容</div>'}
const second = {template:'<div>這是second內容</div>'}
const Home = {template:'<div>這是Home內容</div>'}
const firstFirst = {template:'<div>這是firstFirst內容</div>'}
const firstSecond = {template:'<div>這是firstSecond內容</div>'}
const sld={
template:`
<div class="sld">
<h2>二級組件</h2>
<router-view class="abc"></router-view>
</div>
`
}
//定義組件路徑
const router = new VueRouter({
mode:"history",
base:__dirname,
routes:[ //routes
{path:"/",
name:"Home",component:Home},
{path:"/first",component:sld,
children:[
{path:"/",
name:"Home-first",component:first},
{path:"first",
name:"Home-first-first",component:firstFirst},
{path:"second",
name:"Home-first-second",component:firstSecond}
]
},
{path:"/second",
name:"Home-second",component:second}
]
})
//使用組件
new Vue({
router,
template:`
<div id="r">
<p>{{$route.name}}</p>
<ul>
//router-link to=“指向的組件路徑”
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">first</router-link>
<ul>
<li><router-link to="/first/first">first</router-link></li>
<li><router-link to="/first/second">second</router-link></li>
</ul>
</li>
<li><router-link to="/second">second</router-link></li>
</ul>
<router-view class="abc"></router-view>
//router-view組件顯示區域
</div>
`
}).$mount("#app") //組件掛載（index.html中定義的div的id為app）
4、運行npm run dev，頁面顯示效果為
二、router-link to給子模版組件里傳參
紅色框為增改內容！！！
const firstFirst = {template:'<div>這是firstFirst內容 {{ $route.params.id }} </div>'}
const firstSecond = {template:'<div>這是firstSecond內容 {{ $route.params.id }}</div>'}
<li><router-link :to="{name:'Home-first-first',params:{id:111111}}">first</router-link></li>
<li><router-link :to="{name:'Home-first-second',params:{id:222222}}">second</router-link></li>
注：使用params時，和name搭配；
使用query時，和path搭配，例子如下：
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 Vue.use(VueRouter) 4 5 const Home = {template:'<div>這是Home內容</div>'} 6 const users={ 7 template:` 8 <div class="sld"> 9 <h2>users</h2> 10 <router-view></router-view> 11 </div> 12 ` 13 } 14 const user={ 15 template:` 16 <div class="sld"> 17 {{$route.params.username}} - {{$route.query.aaa}} 18 </div> 19 ` 20 } 21 22 const router = new VueRouter({ 23 mode:"history", 24 base:__dirname, 25 routes:[ 26 {path:"/",name:"Home",components:Home}, 27 {path:"/users",component:users, 28 children:[ 29 {path:":username",name:"user",component:user} 30 ] 31 } 32 ] 33 }) 34 35 new Vue({ 36 router, 37 template:` 38 <div id="r"> 39 <ul> 40 <li><router-link to="/">/</router-link></li> 41 <li><router-link to="/users">users</router-link> 42 <ul> 43 <li><router-link :to="{path:'/users/gujing123',query:{aaa:'bbb'}}">gujing1</router-link></li> 44 </ul> 45 </li> 46 </ul> 47 <router-view class="abc"></router-view> 48 </div> 49 ` 50 }).$mount("#app")
