关于Vue 脚手架中路由的配置

怎样配置路由？

默认我们用Vue脚手架中的自动生成路由文件

1.打开项目找到src文件夹下面的Router文件夹下面的Index.js文件 该文件 就是配置路由的文件，如下图

2.打开index.js文件，可以看到以下配置

3.找到创建路由实例的文件 并在routes 这个配置项中进行配置

上图 我们配置了两个路由地址 .当我们访问该地址是会浏览器会渲染相对应得组件

4.路由一般配合使用的标签是<router-link > 和<router-view>

在我们的根组件 App.js这个文件中使用，其实就相当于a标签

<template>
  <div id="app">
    <div class="show">show</div>
    <!-- 声明式导航 -->
    <div id="nav">
      <router-link to="/">Home</router-link>
<template/>

<router-link >标签里面有一个to属性 其属性值就是你 路由配置中的 path路径 ,所以，当我们点击该标签的时候会跳转到Hmoe组件

点击前 是别的路由地址
点击后

我们可以看到地址栏的地址改为空 默认地址 也就是 ”/“ 浏览器帮我们渲染相对应的home组件，这里我们就完成的路由的基本配置

5.路由懒加载

(当我们不希望访问该路由的时候加载所有组件的时候 我们可以使用路由懒加载 有助于优化性能) 具体配置如下

 {
      path: '/about',
      name: 'About',
      component: () => import( '../views/About.vue')//路由懒加载
    },

6.命名路由配置

//在<router-link :to="{name: 'Home'}">Box</router-link> 

  {// 一个路由配置
      path: '/',// 路由路径
      name: 'Home',// 命名路由
      alias: '/home',// 别名
      component: Home// 当地址栏访问地址为 '/'时，在router-view中使用组件Home
      //在<router-link :to="{name: 'Home'}">Box</router-link>
    },

7.命名视图的配置

• 给<router-view name="a">标签设置name属性
• 在同一个路由地址，渲染多个组件，多个视图

{
  path: '/user',
  name: 'User',
  components: {// 命名视图的配置
    default: ()=> import('../views/User.vue'),
    login: ()=> import('../views/Login.vue')
  }
}
<router-view name="login"></router-view>

8.动态路由

不同用户看到的路由不同

{
  path: '/user/:userId',// 动态路由，路由地址为：/user/可变数据
  name: 'Box',
  component: () => import(/* webpackChunkName: "box" */ '../views/User.vue')
},

9.404页面

当用户访问不纯在的路由地址时 渲染404组件

{
  path: '/user/:userId',// 动态路由，路由地址为：/user/可变数据
  name: 'Box',
  component: () => import(/* webpackChunkName: "box" */ '../views/User.vue')
},

10.路由模式

• 哈希模式 url中带有# （默认）
• history模式 url中没有#
• 在创建路由对象的配置项中设置模式
  mode: ‘hash’,// 哈希模式（默认）
  mode: ‘history’,// history模式

11.路由参数

this.$router是路由操作对象，用于操作路由this.$route是路由信息对象，用于获取路由信息

• 路由传参

1. this.$router.push(’/details?goodsId=’+code) 类似get
2. this.$router.push({
   path: ‘/details’,
   query: {
   id: 3
   }
   })
3. this.$router.push({
   name: ‘Details’,
   params: {
   id: 2
   }
   })
4. 通过动态路由传参

{
  path: '/details/:id',// 动态路由
  name: 'Details',
  props: true,// 动态路由的参数可以在Details组件中通过props接收
  component: () => import(/* webpackChunkName: "box" */ '../views/Details.vue')
},
this.$router.push('/details/'+goodsId) 传参
this.$route.params.id  接收参数

• 注意：路由传参时 path和query组合使用，name和params组合使用

• this.$router.push({path:’/’,query:{}}) 类似get，数据出现在url

• this.$router.push({name:’/’,params:{}}) 类似post，数据不出现在url

• 接收路由参数

1. this.$route.query
2. this.$route.params
3. 通过props接收

12.路由嵌套

• 子路由（二级路由）
• /box/child

{
  path: '/box',
  name: 'Box',
  component: () => import(/* webpackChunkName: "box" */ '../views/Box.vue'),
  children: [// 子路由配置
    {
      path: 'child',// 访问地址为 /box/child 进入子路由，子路由的path不要加/
      name: 'Child',
      component: () => import(/* webpackChunkName: "box" */ '../views/Child.vue'),
      children: []
    }
  ]
},