嵌套路由

export default new VueRouter({
    routes: [
        path: '/about',
        component: '...',
        children: [
            path: 'news',
            component: '',
            children: [
                name: 'detail',
                path: 'detail',
                component: '',
            ]
        ]
    ]
})

注：子级路由不需要写/

/* 跳转路由要写全 */
<router-link to="/about/news/detail"></router-link>
/* 简写通过name属性进行跳转 */
<router-link :to="{name: 'detail'}"></router-link>
/* 使用<router-view />标签展示页面 */

路由传参

1. query

<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message?id=${}&title=${}`"></router-link>
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
    path:'/home/message',
    query:{
        id,
        title
    }
}"></router-link>

2. params

需要修改路由配置，声明接收参数path: "detail/:id/:title"

<div id="app"></div>
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/${}/${}`"></router-link>
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
    name:'detail', 
    params:{
        id,
        title
    }
}"></router-link>

注：携带params参数时使用to的对象写法，只支持name配置项，不支持path

3. 接收参数

直接接收参数：

$route.query.id
$route.params.id

使用props方式：

作用：让路由组件更方便的接收参数，在路由中配置

{
    name: "",
    path: 'detail/:id',
    compoonent: '',
    // 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给组件
    // props: { id: 99}
    // 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给组件
    // props: true
    // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给组件
    props(route) {
        return {
            id: route.query.id
        }
    }
}

router-link的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3. 如何开启replace模式：<router-link replace to="">

编程式导航

this.$router.push({
  name: 'xiangqing',
  params: {
    id,
    title
  }
})
this.$router.replace({
  name: 'xiangqing',
  params: {
    id,
    title
  }
})
this.$router.forward() // 前进
this.$router.back() // 后退
this.$router.go() // 可前进可后退，传入数字

缓存路由组件

使用keep-alive标签，嵌套router-view标签

<!-- 缓存所有组件 -->
<keep-alive>
  <router-view></router-view>
</keep-alive>

只缓存某个组件使用include=""属性，属性值为组件名

<!-- include值为组件名，只缓存一个组件 -->
<keep-alive include="news"></keep-alive>
<!-- include值为组件名，缓存多个组件 -->
<keep-alive :include="['','','']"></keep-alive>

声明周期

路由独有的两个生命周期狗子，用于捕获路由组件的激活状态。

activated(){
  console.log('组件被激活了');
},
deactivated(){
  console.log('组件失活了');
}

路由守卫

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

const routes = [
  {
    name: 'Home',
    path: '/home',
    component: '',
    props: true,
    meta: { isAuth: true, title: '主页' },
    children: []
  }
]

全局路由首位

// 全局前置路由守卫，初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  console.log('前置路由守卫', to, from);
  // 判断当前路由是否需要进行权限控制
  if (to.meata.isAuth) {
    // 权限控制的具体规则
    if (localStorage.getItem('token')) {
      next();
    } else {
      console.log('无权查看！');
    }
  } else {
    next();
  }
})

// 全局后置路由守卫，初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
  console.log('后置路由守卫', to, from);
  document.title = to.meata.title;
})

独享路由守卫

const routes = [
  {
    name: 'Home',
    path: '/home',
    component: '',
    props: true,
    meta: { isAuth: true, title: '主页' },
    children: [],
    beforeEnter: (to, from, next) => {
      
    }
  }
]

组件路由守卫

// 在组件中写
export default {
  // 通过路由规则，进入该组件时被调用
  beforeRouteEnter(to, from, next) {
    next();
  },
  // 通过路由规则，离开该组件时被调用
  beforeRouteLeave(to, from, next) {
    next();
  }
}

路由模式

1. 对于一个url来说，什么是hash值？ ——— #及其后面的内容就是hash值。

2. hash值不会包含在http请求中，即：hash值不会带给服务器

3. hash模式：

    1. 地址中永久带着#号，不美观。

    2. 若以后将地址通过第三方手机app分享，若app效验严格，则地址会被标记为不合法

    3. 兼容性不好

4. history模式：

    1. 地址干净，美观。

    2. 兼容性和hash模式相比落差

    3. 应用部署上线时需要配合后端人员支持，解决刷新页面服务器404的问题。

const router = new VueRouter({
  mode: 'hash', // hash || history
  base: process.env.BASE_URL,
  routes
})

使用npm run build进行打包。

配置后端koa服务器

可以使用connect-history-api-fallback中间件。

npm install --save connect-history-api-fallback

const history = require('connect-history-api-fallback');
app.use(history); // 需要在配置静态资源前调用