vue動態路由匹配

時間 2019-12-05

原文原文鏈接

vue動態路由匹配

咱們常常須要把某種模式匹配到的全部路由，所有映射到同個組件。例如，咱們有一個User組件,對於ID各不相同的用戶，都要使用這個組件來渲染。那麼，咱們能夠在vue-router的路由路徑中使用「動態路徑參數」（dynamic segment）來達到這個效果：html

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 動態路徑參數 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})

如今呢，像/usr/foo 和 /user/bar 都將映射到相同的路由。vue

一個「路徑參數」使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，能夠在每一個組件內使用。因而，咱們能夠更新 User 的模板，輸出當前用戶的 ID：vue-router

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

你能夠看看這個在線例子。api

你能夠在一個路由中設置多段「路徑參數」，對應的值都會設置到 $route.params 中。例如：app

模式	匹配路徑	$route.params
/user/:username	/user/evan	`{ username: 'evan' }`
/user/:username/post/:post_id	/user/evan/post/123	`{ username: 'evan', post_id: 123 }`

除了 $route.params 外，$route 對象還提供了其它有用的信息，例如，$route.query (若是 URL 中有查詢參數)、$route.hash 等等。你能夠查看 API 文檔的詳細說明。post

舉例：顯示xx的頁面this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo4</title>
</head>
<body>
<div id="app">
    <router-link to="/user/zs">張三</router-link>
    <router-link to="/user/ls">李四</router-link>
    <hr>
    <router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    //寫路由
    const routeArray=[
        {
            path:'/user/:name',
            component:{
                template:`<div>
                    <h1>這是{{$route.params.name}}的主頁頁面!</h1>
        </div>`
            }
        }
    ]
    //生成VueRouter實例
    const routerObj = new VueRouter({
        routes:routeArray
    })
    var app = new Vue({
        el:"#app",
        data:{},
        router:routerObj //將路由實例掛載到vue實例中
    })
</script>
</body>
</html>

舉例2：獲取url中的年齡和愛好url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo5</title>
</head>
<body>
<div id="app">
    <!--路由的入口-->
    <!-- 使用 router-link 組件來導航. -->
    <!-- 經過傳入 `to` 屬性指定連接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
    <!--/index表示下面定義的path-->
    <router-link to="/user/張三">張三</router-link>
    <router-link to="/user/李四">李四</router-link>
    <hr>
    <!--路由的出口-->
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    //寫路由
    const routeArray = [
        {
            path:'/user/:name',
            component:{
                template:`<div>
                    <h1>這是{{$route.params.name}}的主頁頁面</h1>
                    <p>芳齡:{{$route.query.age}}</p>
                    <p>愛好:{{$route.query.hobby}}</p>
</div>`
            }
        }
    ]
    //生成VueRouter實例
    const routerObj = new VueRouter({
        routes:routeArray
    })
    var app = new Vue({
        el:'#app',
        data:{},
        router:routerObj  //將路由實例掛載到vue實例中
    })
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。