Vue路由

?

1.用name傳遞參數(shù)

在路由文件里配置name屬性

routes: [

????{

??????path: '/',

??????name: 'Hello',

??????component: Hello

????}

?]

在.vue模板里用$router.name的形式接收：<p>{{ $route.name}}</p>

?

2.通過(guò)<router-link> 標(biāo)簽中的to傳參

<router-link>標(biāo)簽中的to屬性進(jìn)行傳參，需要對(duì)to進(jìn)行一個(gè)綁定，用：to。

格式：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

用法：

?<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi頁(yè)面1</router-link>

路由配置：

{path:'/hi1',name:'hi1',component:Hi1}

頁(yè)面接收：

{{$route.params.username}}

?

3.單頁(yè)面多路由區(qū)域操作

?<router-view ></router-view>

?<router-view name="left"></router-view>

?<router-view name="right"></router-view>

路由配置：

export default new Router({

routes: [

{path: '/', ? ? components: {?default:Hello, ? left:Hi1,? ? right:Hi2? }},

{path: '/Hi',? components: {default:Hello,? ? left:Hi2, ? right:Hi1 ? }}

]

})

?

4.vue-router利用url傳遞參數(shù)

：冒號(hào)的形式傳遞參數(shù)

配置路由：

{ ? path:'/params/:newsId/:newsTitle'? ? ,? ? component:Params? }

.vue組件中：

用法：<router-link to="/params/198/jspang website is very good">params</router-link>?

取值：

<p>新聞ID：{{ $route.params.newsId}}</p>

????????<p>新聞標(biāo)題：{{ $route.params.newsTitle}}</p>

正則表達(dá)式在URL傳值用法：

要求傳遞參數(shù)ID只能是數(shù)字的形式，傳值時(shí)有個(gè)基本類(lèi)型判斷

用法：path:'/params/:newsId(\\d+)/:newsTitle',

?

5.redirect基本重定向

{ path:'/goback' , redirect:'/' }

重定向時(shí)傳遞參數(shù)

{ path:'/goParams/:newsId(\\d+)/:newsTitle' , redirect:'/params/:newsId(\\d+)/:newsTitle' }

?

6.alias別名的使用

路由配置： {????path: '/hi1',????component: Hi1,????alias:'/jspang' }

用法：<router-link to="/jspang">jspang</router-link>

注意：

別名請(qǐng)不要用在path為’/’中，如下代碼的別名是不起作用的。

{? path: '/',??component: Hello,??alias:'/home'}

?

?

7.路由中的鉤子

（1）路由配置文件中的鉤子函數(shù)，只能寫(xiě)一個(gè)beforeEnter

{

??????path:'/params/:newsId(\\d+)/:newsTitle',

??????component:Params,

??????beforeEnter:(to,from,next)=>{

????????console.log('我進(jìn)入了params模板');

????????console.log(to);

????????console.log(from);

????????next();

},

三個(gè)參數(shù)：

to:路由將要跳轉(zhuǎn)的路徑信息，信息是包含在對(duì)像里邊的。

from:路徑跳轉(zhuǎn)前的路徑信息，也是一個(gè)對(duì)象的形式。

next:路由的控制參數(shù)，常用的有next(true)和next(false)。

?

（2）在模板中的鉤子函數(shù)

beforeRouteEnter：在路由進(jìn)入前的鉤子函數(shù)。

beforeRouteLeave：在路由離開(kāi)前的鉤子函數(shù)。

?

轉(zhuǎn)載于:https://www.cnblogs.com/Abner5/p/7768480.html

總結(jié)

以上是生活随笔為你收集整理的vuejs之【router-link】大全（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。