路由配置、路由参数

一、路由配置

1、路由组件

路由组件就是一个普通组件，只不过不需要使用全局或者局部注册。在路由配置中绑定对应的路由组件即可

const page = {
  template: `
    <div></div>
  `
}


const routes = [
  {
    path: '/',
    component: page // 一旦页面路由匹配了 / 那么vue就会把page渲染到页面的router-view中
  }
]

2、路由配置

路由配置是一个数组

const routes = [
  // 多个路由配置对象
  {
    path: '/a/b/c/d/e', // 表示对应的路由路径
    component: 组件名,
    children: [
      // chilren中包含的也是路由配置对象，只不过他的组件会渲染到其父路由的组件中的router-view
      {
        path: 'f', // path不需要写 / 路由会和父路由进行拼接  /a/b/c/d/e/f
      }
    ]
  }, {
    path: '/a/b/c/d/e/f', // 这个和上面的情况不一样，他的组件会被渲染到app的router-view中
    component: 组件名
  }
]

3、创建router对象

router对象是new VueRouter得到的

const router = new VueRouter({
  routes,
  linkActiveClass: '新的类名',
  linkExactActiveClass: '精确的新的类名'
})

4、在new Vue中配置router

const app = new Vue({
  el: '#app',
  router // 一旦将router加入到这个位置，那么this中就会多两个东西，this.$route this.$router
})

5、router-link

router-link默认会被渲染成a标签

<router-link to="path"></router-link>

<!-- 修改单独的router-link激活类名 -->
<router-link active-class="类名"></router-link>

<!-- 修改单独的router-link精确激活类名 -->
<router-link exact-active-class="类名"></router-link>

<!-- 把active-class变成精确的class -->
<router-link exact></router-link>

<!-- 可以将router-link渲染成其他标签 -->
<router-link tag="标签名"></router-link>

<!-- 修改跳转方式的事件，默认是点击跳转 -->
<router-link event="click"></router-link>
<router-link :event="['click', 'mouseenter']"></router-link>

二、Vue 路由参数

参数分类
1、query

http://localhost:3000/#/?key=value&key2=value

this.$route.query.key
this.$route.query.key2

router-link的声明

<router-link to="/?key=value"></router-link>
<router-link :to="'/?key=' + value"></router-link>
<router-link :to="{path: '路径', query: {key: value}}"></router-link>
<router-link :to="{name: '路由名字', query: {key: value}}"></router-link>

2、params

注意: 想要有params参数必须配置动态路由，动态路由的变量，就是params的属性

const routes = [
  {
    path: '/:id'
  }
]

<div>{{$route.params.id}}</div>

router-link声明

<router-link to="/value"></router-link>
<router-link :to="'/' + value"></router-link>
<!-- 下面写法需要给路由添加name属性才能完成 -->
<router-link :to="{name: '路由名字', params: {id: value}}"></router-link>