npm i Vue-router

import VueRouter from 'vue-router'Vue.use(VueRouter)

//导入组件import Header from './layout/header.vue'import Footer from './layout/footer.jsx'//定义组件const Foo = { template: '<div>foo</div>' }

// 定义路由export default [
  //一个简单的路由
  {
    path: '/',
    redirect: '/app'
  },

  //一个写了较多配置的路由
  {
    path: '/app/:id',
    props: (route) => ({ id: route.query.b }), // 可以将id以props的形式传给Todo组件
    component: () => import('../views/todo/todo.vue'),
    name: 'app',
    meta: {
      title: 'this is app',
      description: 'i am apple'
    },
    beforeEnter (to, from, next) {
      console.log('app route before enter')
      next()
    }
    children: [
      {
        path: 'test',
        component: Login      }
    ]
  },]

const router = new ({
    routes: routes    //或者直接缩写routes}）

new Vue({
  router,    //这样就把第3步创建的router实例注入到了根实例
  render: (h) => h(App)}).$mount('#root') // mount(root),将App组件挂载到入口文件index.js的root这个dom元素上

<router-link to="/app/123">app123</router-link>

<router-link :to="{ path: "/app/123" }"> app123 </router-link><router-link :to="{ path: "/app",params: { userId: 123 } }"> app123 </router-link><router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

<router-link :to="{ name: 'app', params: { userId: 123 }}">User</router-link>