Vue--vue-router基本配置

1.安装:npm install --save vue-router

2.使用:如果直接使用vue-cli生成,选择了vue-router,会有一个单独的文件夹——router,这里就是存放路由映射关系的地方。具体查看如下代码(一下代码省略了对应的路由组件--component对应的视图):

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [ // 路由关系数据

]

const router = new VueRouter({
  mode: 'history', // 可以选择hash
  base: process.env.BASE_URL,//  配置单页应用的基路径
  routes
})

export default router

routes里面就是配置路由与对应路由组件的地方。参数类型为

// 每个routes
{
  path: '/about',// 对应路由地址
  name: 'About',// 路由对应的名称
  // 可以直接用一个路由组件,这样写是懒加载,触发对应路由的时候才会去请求这个路由组件的信息
  component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}

每个路由对应的是一个<router-view>,如果是多级路由(嵌套路由),每个参数里面有个children,为数组,数组里每个元素和每个routes是相同的,但是需要对应父组件下的<router-view>路由视图出口如下:

  let routes = [
    {
      path: '/user' // 对应的地址为 基础地址:端口号/user
      component: User, // 对应的路由组件,对应第一个匹配到的  router-view 
      // 子路由的渲染关系为 -- 第一个router-view渲染父的component,父内的component的routerview对应子路由的component
     // 例如 /user/one -- 渲染User -- 在渲染User组件内的routerview对应的UserOne 
      children: [
        {
          path: 'one', // 对应路由为 基础地址:端口号/user/one
          component: UserOne // 对应路由组件UserOne,对应user里面的router-view视图出口
        },
        {
          path: 'two', // 对应路由为 基础地址:端口号/user/two
          component: UserTwo// 对应路由组件UserTwo,对应user里面的router-view视图出口
        }
      ]
    }
  ]

路由配置和对应路由视图的出口关系是一个path及component对应一个视图出口。子路由对应父路由component内的视图出口。

动态路由传参(路由传参的后续在router-link及路由函数进行说明),这个因为与路由配置十分雷同,就放在这里进行说明。

let routes = [{ path: '/user/:id', component: User }]

 这里的 /:Id 表示是一个动态路由,可以不是指定的路由地址,符合/use/anything的参数都会匹配到这个路由。从而渲染对应的路由组件User,一般会根据这个id的参数进行初始化页面(如根据id查询数据等),可以在每个路由组件实例的this.$route.params中获取。

基础配置就到这里,后续命名路由,命名视图,路由传参等后续再进行讲解。

Vue-路由基础配置1

关于作者

xlynn
获得点赞
文章被阅读