[30天 Vue学好学满 DAY23] Vue Router-2

昨天笔记了基础Vue Router 以及 History概念，今天继续笔记其他细项用法。

动态路由

将不同路由导向同个元件，可视为带入不同参数至同元件中。

於route.js 新增路由

import Shop from '../views/Shop.vue'

{
    name: 'shop',
    path: "/Shop/:id", // params 参数 id
    component: Shop
}

新增shop.vue

<div>
    <h1>SHOP {{id}}</h1>
</div>

透过computed即时抓取新id

computed: {
    id() {
      return this.$route.params.id;
    }
}

於App.vue 新增进入点

<router-link to="/shop/1" style="margin-left:10px">shop1</router-link>
<router-link to="/shop/2" style="margin-left:10px">shop2</router-link>

起前端验证

且可透过上下页切换，并纪录於浏览器中

监听路由变化 watch

watch: {
    $route(to, from) {
      console.log(to) // 目的地
      console.log(from) // 原地
    }
},

所有路由

透过 * 实现，实现所有路由建议用於最後，可用於导向NotFound页面

path: '*',  // 所有路径
path: 'shop-*',  // 所有shop开头路径

非强制参数

透过?实现

// match /shop/xxx and /shop
path: '/shop/:id?',
path: '/shop/:id',

巢状路由(嵌套)

透过children实现

{
    name: 'shop',
    path: "/shop/:id", // 带入参数 id
    component: Shop,
    children: [
        {
            // 当 /shop/:id/product 匹配成功，
            // Product 会被渲染在 Shop 的 <router-view> 中
            path: 'product', // 不可加上 /，否则将回根目录
            component: Product
        },
        {
            // 当 /shop/:id/clerk 匹配成功，
            // Clerk 会被渲染在 Shop 的 <router-view> 中
            path: 'clerk',
            component: Clerk
        }
    ]
},

具名路由

如上述范例中，不同的route中有其各自name属性，可在引用时让程序码更简洁。

{
     name: 'helloWorld',   //组件呈现名称
     path: '/',     //对应路径
     component: HelloWorld //对应组件
},

具名视图

定义name於<router-view>中，同页面出现多个<router-view>，有利於辨识与维护。

<router-view name="Header"></router-view>
<router-view name="Sidebar"></router-view>

需於routes中定义<router-view>所对应的元件

{
    name: 'Home',
    path: '/',
    components: {
        default: HelloWorld, // 预设
        product: Product, // <router-view> name: product
        clerk: Clerk
    }
}

重新导向(redirect)

透过routes中redirect实现

透过路径导向
{ path: '/home', redirect: '/clerk' }
//透过名称导向
{ path: '/home', redirect: { name: 'clerk' }}
// 方法导向
{ path: '/a', redirect: to => { params }}

路由别名(alias)

透过
透过routes中alias实现，让视图在不改变URL情况下看到其他页面。

// 使用者在/home页面时，显示/内容，URL不导向。
{ path: '/', component: Home, alias: '/home' }

// 多别名
alias: ['/home', '/homePage']

props

一般使用上，透过:xxx & $route传递参数会形成高耦合情境，使元件的重用性降低，而Vue Router提供了props取代$route.params的做法，透过props: true实现。

$route.params

[{ path: '/shop/:id', component: Shop }]

props

[{ path: '/shop/:id', component: Shop, props: true }]

具名路由props，需个别设置

{
    name: 'Home',
    path: '/',
    components: {
        default: HelloWorld, // 预设
        product: Product,
        clerk: Clerk
    },
    props: {
        default: true, // 预设
        product: true,
        clerk: false
    }
},

元件可将计算属性调整为prop接收

props: {
    id: String
},

非同步载入

有需要时才载入元件(lazy-loading)，透过调整route中component为import实现。

// 直接引入
import Shop from '../views/Shop.vue'
component: Shop,

// 非同步
component: () => import ('../views/Shop.vue'),

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://book.vue.tw/CH4/4-1-vue-router-intro.html
感谢各路大神