vue-router使用总结

基础写法

将router的配置分离出去
router.js

定义路由表

const routes = [
  // 一个对象，就是一个路由表配置项
  // 必须配置的是path，component
  {
    // 当地址栏地址变化为/home时，就加载Home组件，放置在router-view中
    path: '/home',
    //按需加载
    component: ()=>import './components/Home'
  }
]


// 创建路由对象
const router = new Router({
  //路由配置项
  // mode: 'hash',
  // mode: 'history',
  // mode: 'abstract',
  routes
})

// 向外输出路由
export default router;

main.js

import router from './router'
new Vue({
  el: '#app',
  router,
  render: h=>h(App)
});

//路由组件容器
<router-view></router-view>
//路由切换链接，不会刷新页面  to="path"
<router-link class="tab" to="/home">首页</router-link>

路由嵌套

// 定义路由表
const routes = [
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: 'search',
        component: Search
      },
      ...
    ]
  },
  ...
  ]

路由正向传参

需要传参给子路由的组件，传参进入下一页的方法：
1.sessionstorage传参，进入前设置，进入后在组件的created方法中取值

2.路径后面使用’?'拼接参数, 进入组件后，在组件中使用this.$route.query访问 （没有携带参数也可以进入）

this.$router.push(`/home/detail?id=${id}`);

3.在路由配置表中，配置动态路由。触发路由时传参，在组件中使用this.$route.params访问（必须携带参数才可以进入）

  this.$router.push(`/home/${id}`);

接收参数

data(){
    return{
        id: this.$route.params.id
    }
}

编程式导航

操作路由对象的的方法有：

this.$router.replace(string|object);替换当前路由
this.$router.push(string|object);进入路由
this.$router.back();退回到上一个路径 \ 等价于go(-1)
this.$router.forward();//前进 等价于go(1)
this.$router.go(n);//前进

const routes = [
  {
    {
        // 动态路由
        path: 'detail/:id/:title',
        //动态路由上的参数，'id' 'title'这几个参数在组件Detail中使用props接收
        props: true,
        component: Detail
      }
  }
]

Detail.vue

props: {
    //接收动态路由上的参数
    title: String,
    id: String
  },
methods: {
    backAction(){
      this.$router.back();
    }
},

命名路由

const routes = [
    {
        name: 'homeView',//命名路由,命的名字必须是唯一的
        path: '/home',
        component: Home,
    }
]

to里面的值跟可以push里面一样

<router-link class="tab" :to="{name: 'homeView'}">首页</router-link>

  this.$router.push({
        name: 'homeView',
        params: {
          id, title  //可以传参
        }
      });
      
      ||   等价于
      ||
      
  this.$router.push({
    path: `/home/${id}/${title}`
  });

路由别名，重定向

跟之前的node是一样的

写在最后，路由是从上往下匹配的，当全部的路由都匹配晚了，就会匹配到404页面

   {
    path: '/404',
    // 配置别名
    alias: '/notfind',
    component: ()=>import('./pages/NotFind')
  },
  {
    path: '**',
    //重定向
    redirect: '/404'  
  }

命名视图

在一个项目中每次都要路由到多个组件，
这时候就需要给路由命名

  <div class="app-left">
    <Header/>
    <router-view name="menu"/>
  </div>

//只能有一个未命名
  <router-view class="app-right"/>

 {
    path: '/stores',
    components: {
      menu: ()=>import('./menu/stores-menu'),
      //未命名的组件用default
      default: ()=>import('./content/stores-content')
    }
  },

路由守卫

路由切换—>执行前置守卫---->执行独享守卫----->组件内部守卫---->全局解析守卫---->后置钩子
---->创建组件挂载组件---->调用组件内部守卫的next函数，将挂载好的组件传人