vue-router：如何引用路由

vue4.0沒有自己添加vue-router，可以先用npm安裝一個，再根目錄下創建router.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home'

Vue.use(Router);

export default new Router({
  routes:[
    {
      path: '/',
      name: 'home',
      component:Home,
      children:[
        {
          path:'/product/:id', //動態定義路由
          name:'product',
          component: () => import('./pages/product.vue')
        }
      ]
    }
  ]
});

main.js中

import Router from './router'

new Vue({
  router:Router,
  render: h => h(App),
}).$mount('#app')

home.vue和App.vue中都添加

<template>
  <div>
  	<nav-header></nav-header>
    <router-view></router-view>
    <nav-footer></nav-footer>
  </div>
</template>

router.js中，非path：'/'的children下path不加/

 {
      path: '/order',
      name: 'order',
      component: Order,
      children:[
        {
          path: 'list',  //加/就運行不了
          name: 'order-list',
          component: OrderList,
        }
      ]}

redirect: ‘/index’, //默認選項

  routes:[
    {
      path: '/',
      name: 'home',
      component:Home,
      redirect: '/index',  //默認選項
      children:[{
          path:'/index',
          name:'index',
          component:Index
        }]           //子路由
    }
  ]