4、路由组件的搭建

1、路由在项目中的应用

• 下载插件vue-router

npm install --save vue-router

在src目录下创建pages/views文件夹，用来放置路由组件

项目当中配置的路由一般放置在router文件夹中的【index.js】文件

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

const routes = [
    {
        path: '/',
        // 懒加载方式加载路由组件
        component: ()=>import(/* webpackChunkName: "login" */ '../pages/Login.vue')
    }
]

export default new VueRouter({
    // 配置路由
    routes
})

在入口文件【main.js】中引入并使用路由

// 引入路由
import router from '@/router/index.js'

new Vue({
  render: h => h(App),
  // 注册路由.key value一致，省略value
  router
}).$mount('#app')

2、路由组件和非路由组件的区别

• 路由组件一般放置在pages/views文件夹下；非路由组件一般放置在components文件夹下
• 路由组件一般需要再router文件夹中进行注册，使用的即为组件的名字；非路由组件在使用的时候一般以标签的形式使用
• 注册完路由，不管是路由组件还是非路由组件，都有$route和$router属性

3、$route和$router对比

• $route一般获取路由信息【params、query、路径等】
• $router一般进行编程式导航进行路由跳转【push、replace】

4、路由的跳转方式

• 声明式导航：声明式导航务必要有to属性

<router-link to="">点击跳转</router-link>

• 编程式导航

    this.$router.push({
        path: ''
    })
    this.$router.replace('')

5、在配置路由的时候，可以给路由添加路由元信息【meta】

const routes = [
    {
        path: '/login',
        // 懒加载方式加载路由组件
        component: ()=>import(/* webpackChunkName: "login" */ '../pages/Login.vue'),
        meta: {
            isShow: false
        }
    },
]

访问时可通过this.$route.meta.isShow