vue-router (opens new window)

版本注意

vue2使用vue-router4会报错 - 安装vue-router3即可

1.安装路由

npm install vue-router

2.配置路由

// 1. 按需加载(需要的时候的时候进行加载)
component: () => import('@/views/Home'),  // 使用ES中的语法
component：resolve => require(['需要加载的路由的地址'，resolve])  // vue异步组件
// 2. 全部引用
import MyHome from '@/views/My/index.vue'


import Vue from 'vue';
import VueRouter from 'vue-router';
import MyHome from '@/views/My/index.vue'

Vue.use(VueRouter)
const routes = [
    //表示没有匹配到的路由直接进行重定向
    { path: '*', redirect: "/404" },
    {
        path: '/',
        redirect: 'login'
    },
    {
        path: '/login',
        component: () => import('@/views/Login'),
        meta: { title: '登陆页' },
    },
    {
        // 必须得传递参数
        path: '/home/:id',
        component: () => import('@/views/Home'),
        meta: { title: '主页' },
        name: "主页",
    },
    {
        path: '/my',
        component: MyHome,
        redirect: '/my/mytask',
        children: [  // 子路由
            // 子路由不能带斜杠
            { path: 'mytask', component: () => import('@/views/My/task.vue') },
            { path: 'collection', component: () => import('@/views/My/collection.vue') },
        ]
    },
    {
        path:'/list',
        components:{
            //默认的组件
            default:HelloWorld,
            left:H2,  //router-view中name中的值对应的组件
            right:H1
        }
        // <router-view name="left" class="left"/>
        // <router-view name="right" class="right"/>
    }
]
var router = new VueRouter({
    routes: routes
})
router.beforeEach((to, from, next) => {
    // 不同的路由配置所属title
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next();
})
export default router

3.路由对象

this.$route   //路由对象信息(用于获取当前路由的信息)
fulpath       //全部路径
hash          //url带有#号部分
matched       //多条路由记录信息可以实现面包屑 以及路由验证
name          //当前路由名字
params        //url的动态参数
path          //当前的路径
query         //?携带的参数
meta          //路由元信息

4.路由方法

// name必须和路由中的name一样
// params post请求
// query  get请求
<router-link to="/my">登录</router-link>
<router-link :to="{ name: 'mytasks', params: { id: 111 } }">我的</router-link>
<router-link :to="{ path: '/my', query: { id: 111 } }">我的</router-link>
// 通过name(必须和router中的name一样才能跳转)来跳转
this.$router.push({
    name:"jump",
    params: { userId: '123' },
},() => {
  // 执行回调
  location.reload() // 刷新页面, 清空整站临时存储数据
})
this.$router.push({
    path:"jumps",
    query: { userId: '123' }
})
this.$router.back()    //返回上一页
this.$routet.push()    //跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面
this.$router.replace() //跳转到指定URL，替换history栈中最后一个记录，点击后退会返回至上上一个页面
this.$router.go()      //类似window.history.go(n)，向前或向后跳转n个页面，n可正（先后跳转）可负（向前跳转）

5.路由拦截

//to: Route: 即将要进入的目标 路由对象
//from: Route: 当前导航正要离开的路由
//next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else if (!sessionStorage.getItem('isLogin')) {
    next('/login')
  } else {
    next()
  }
})
// 解决多次点击路由报错问题
import VueRouter from "vue-router";
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

6.监听路由

watch:{
  $route(to,form){},
  // 深度监听
  $route: {
      immediate: true,
      deep:true,
      handler: function(val, oldVal){},
  }
}
this.$router.push({ query: {} });  // 清空路由页面上的参数  url上也能删除