Vue路由

一、安装依赖

1. Vue-router模块
Vue的路由功能主要依靠Vue-router模块来实现，所以必须在项目中安装该依赖模块

npm i Vue-router

2. Vue.use()明确说明要使用路由

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

二、使用路由的4大步骤

1. 定义（路由）组件
组件可以从其他文件import进来

//导入组件
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'

//定义组件
const Foo = { template: '<div>foo</div>' }

2. 定义路由
定义一个路由有很多选项，比如路由的路径path，name，组件等等。所有定义的路由被放到一个数组里，每个定义路由用对象形式。

// 定义路由
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
      }
    ]
  },
]

3. 创建router实例，然后把第2步的配置传进来

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

4. 在根实例注入路由实例
从根实例注入第3步创建的路由实例，则整个应用都有路由功能

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

三、在模板文件进行路由导航

1. <router-link>导航【this.$router.push({path:"})】
router-link的导航方式有以下几种
@1 : 直接在to属性指明路由路径进行匹配路由

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

@2 : 使用v:bind:path匹配路由定义的name选项，进而达到路由的目的

<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>

@3 :使用name来路由

注意：这种方式 to前面一定要加v-bind(:),这样才会编译，否则，会把to当原来的属性，认为to的内容就是路径

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

2. <router-view>渲染
在router-link导航到的路由，将会把这个路由的匹配组件内容渲染到router-view所在的位置。
router-view只有一个name属性，用于区分多个路由渲染的不同的位置。