文章目錄
在vue1.0版本的超鏈接標籤還是原來的a標籤，鏈接地址由v-link屬性控制
而vue2.0版本里超鏈接標籤由a標籤被替換成了router-link標籤，但最終在頁面還是會被渲染成a標籤的
至於爲什麼要把a換成router-link原因還是有的，比如我們之前一直慣用的nav導航裏面結構是（ul>li>a），router-link可以渲染爲任何元素，這裏可以直接渲染成li標籤，同樣能實現跳轉效果，節省了a標籤的使用，還有一個原因可能是因爲a標籤正常是鏈接的跳轉的作用，點擊a時可能會重載頁面，使用router-link，此標籤會被vue所監聽，跳轉鏈接時就不會刷新頁面了。當然這個人理解，不對之處有望指正。
"router-link"屬性
1.":to" 屬 性
相當於a標籤中的"herf"屬性，後面跟跳轉鏈接所用<router-link :to="/home">Home</router-link>
渲染結果<a href="/home">Home</a>
2.“replace” 屬 性
replace在routre-link標籤中添加後，頁面切換時不會留下歷史記錄<router-link :to="/home" replace></router-link>
3.“tag” 屬 性
具有tag屬性的router-link會被渲染成相應的標籤<router-link :to="/home" tag="li">Home</router-link>
渲染結果<li>Home</li>
此時頁面的li同樣會起到a鏈接跳轉的結果，vue會自動爲其綁定點擊事件，並跳轉頁面
4.“active-class” 屬 性
這個屬性是設置激活鏈接時class屬性也就是當前頁面所有與當前地址所匹配的的鏈接都會被添加class屬性<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class屬性的默認值是router-link-active,所以如果沒有設置，就會被渲染爲這個class
可以在router.js裏面設置
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 這是鏈接激活時的class
})
5.“exact” 屬 性
開啓router-link的嚴格模式<router-link :to="/" exact>home</router-link>
上面這個標籤如果不加exact屬性，則會在vue2.leenty.com/article頁面下也會被匹配到，
這卻不是我們的本意,在加了這個屬性後就會正確的匹配到vue2.leenty.com下
嵌套路由實現左邊選擇右邊刷新：
左邊菜單欄使用：router-link 標籤，右邊使用 router-view 嵌套，實現路由；
router-link 傳參方式：
其中name 需要和 router.js 中路由對應，傳入不同的 type 以區分不同的tab頁面；
實現步驟：
1.app 的主路由中 這個步驟一成不變;
2.在想要實現同頁面的嵌套路由的page中；再一次定義一個 router-view 標籤，如下：
①：需要跳轉的 router-link :
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link :to="{name: 'firstPage', params:{type:'1'}}">選項一
</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link :to="{name: 'firstPage', params:{type:'2'}}">選項二
</router-link>
</el-menu-item>
</el-menu-item-group>
複製代碼
②：嵌套的 router-view：
<el-main>
<router-view></router-view>
</el-main>
複製代碼
③：router.js 中的配置：
routes: [
{
path: '/',
name: 'mainPage',
component: MainPage
},
{
path: '/page',
name: 'mainPage',
component: MainPage,
children: [
{
path: '/page/:type',
name: 'firstPage',
component: FirstPage
}
]
}
]
其中需要一個根路由，再在根路由的路徑下寫子路由路徑！注意 path 下面的路徑配置；其中，type 的值使我們在 router-link 中傳遞過來的；在子組件的 firstPage 中我們可以使用 watch 來監聽url 上面的 params 變化；具體如下：
④：在 firstPage 中的 watch 函數監聽 route 變化
watch: {
'$route' (to, form) {
if (this.$route.params.type === '1') {
this.Msg = '這是第一頁'
} else if (this.$route.params.type === '2') {
this.Msg = '開心,這是第二頁'
}
}
}
在這個地方執行該頁面相應的操作即可；
注意事項：
1.keep-alive 標籤的用法：
<keep-alive>
<router-view></router-view>
</keep-alive>
配合 router-view 緩存整個路由頁面
2.路由中可以使用 children 當作路由的嵌套；
{
path: '/app',
name:'app',
redirect:'/app/main',
component: resolve => import('./app'),
children:[
{
path: '/app/main',
name:'main',
component: resolve => import('./view/mainPage'),
｝
]
}
3.路由中component中 resolve 的用法：
onent: resolve => import(’./view/mainPage’)
實現路由的懶加載；
this.$route和this.$router的區別
this.$route是this.router的一部分
this.$route指的是當前被激活的路由信息
this.$router指的就是router文件夾裏面的index.js拋出的內容
也就是以下的內容
export default new Router({
routes: [
{
path: '/',
name: 'Button',
component: Button
},
{
path: '/button',
component: Button,
children: [
{
path: '/button/button1',
name: 'Button1',
component: Button1
},
{
path: '/button/button2',
name: 'Button2',
component: Button2
}
]
},
{
path: '/layout',
name: 'Layout',
component: Layout
}
],
mode: 'history'
})
而this.$route指的是其中某一個被激活的路由
如果當前的路徑是這樣http://localhost:8081/button/button2?name=dx&age=18
那this.$route指的就是這一個路徑 ,在組件內顯示當前組件路由後面的部分,可以在當前路由中使用 this.$route
<template>
<div>
<h2>{{userId}}</h2>
</div>
</template>
<script>
export default {
computed:{
userId(){
return this.$route.params.userId
}
}
}
</script>
{
path:'/user/:userId'
component:user
}
傳遞參數的方式
params傳遞簡單值 , query傳遞對象,有大量數據用query
通過:to跳轉
<!-- <router-link :to="/profile">檔案</router-link> -->
<router-link :to="path:'/profile',query:{name:'wushen',age:18,height:180">點擊跳轉Profile組件</router-link>
<template>
<div>
<h2>我是Profile組件</h2>
<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
<h2>{{$route.query.height}}</h2>
</div>
</template>
通過代碼跳轉
<template>
<div>
<button @click='userClick'>用戶</button>
<button @click='profileClick'>檔案</button>
</div>
</template>
<script>
export default{
data(){
return {
userId:'wushen'
}
},
methods:{
userClick(){
this.$route.push('/user/'+this.userId)
},
profileClick(){
this.$route.push({
path: '/profile',
query: {
name: 'wushen',
age:18,
height:1.88
}
})
}
}
}
</script>
this.$route.query和this.$route.params的使用與區別
params相對應的是name , query相對應的是path
一、this.$route.query的使用
1、router/index.js
{
path:'/mtindex',
component: mtindex,
//添加路由
children:[
{
path:':shopid',
component:guessdetail
}
]
},
2、傳參數
this.$router.push({
path: '/mtindex/detail', query:{shopid: item.id}
});
3、獲取參數
this.$route.query.shopid
4、url的表現形式(url中帶有參數)
http://localhost:8080/#/mtindex/detail?shopid=1
二、this.$route.params
1、router/index.js
{
path:'/mtindex',
component: mtindex,
//添加路由
children:[
{
path:"/detail",
name:'detail',
component:guessdetail
}
]
},
2、傳參數（ params相對應的是name query相對應的是path）
this.$router.push({
name: 'detail', params:{shopid: item.id}
});
3、獲取參數
this.$route.params.shopid
4、url的表現形式(url中沒帶參數)
http://localhost:8080/#/mtindex
this.$router.push傳遞參數
this.$router.push傳遞參數有2種方式：
傳遞參數 – this.$router.push({path: ’ 路由 ', query: {key: value}})
參數取值 – this.$route.query.key
使用這種方式，傳遞參數會拼接在路由後面，出現在地址欄.
傳遞參數 – this.$router.push({name: ’ 路由的name ', params: {key: value}})
參數取值 – this.$route.params.key
使用這種方式，參數不會拼接在路由後面，地址欄上看不到參數…
動態路由也是傳遞params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否則params將無效。需要用name來指定頁面。
[通過路由配置的name屬性訪問].