vue-router

原创已于 2022-10-12 16:09:36 修改 · 272 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-11-07 11:20:43 首次发布

前端专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了Vue Router在Vue项目中的两种路由模式——hash模式和history模式，比较了它们的特点，并展示了如何在项目中配置和使用路由、参数传递以及导航守卫。还通过实例演示了如何结合全局前置守卫实现用户登录验证。

1. VueRouter的两种模式

VueRouter的两种模式
vue的路由实现：hash模式和history模式

hash模式：#以及#后面的字符就是hash内容，用window.location.hash读取，可以通过onhashchange监听hash改变。一般在开发中常用

特点：hash内容虽然在URL中，但是不被包括在Http请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history模式：不带#的地址。用window.location.pathname获取，history模式利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

特点：一般一刷新就404了。
history模式URL就要和后端进行一致，所以要改为history也需要后端的配合，否则会报错。

hash模式在每次刷新页面时是只更改“#”后的东西，对后端完全没有影响。history每次刷新会重新向后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404。history的好处是可以进行修改历史记录。不过如果对于项目没有硬性标准要求，我们可以直接使用hash模式开发。

2. VueRouter在vue项目中的简单使用

VueRouter中文文档

//*******在vue项目中使用VueRouter************
//1.安装VueRouter
npm install vue-router
//2. 引入VueRouter 
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
//3. 创建路由对象，定义路由规则(路由配置)
//例：
export default new VueRouter({
  routes:[
    {
      path:'/',
      name:'home',
      component:Home,
      //重定向
      redirect:'/index',
      //路由嵌套
      children:[
        {
          path: '/index',
          name: 'index',
          component: Index,
        }
      ],
      // 路由元信息，程序员可以填加任意自定义属性
      meta: {}
    },
    {
      path: '/login/:name',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: register
    }
  ]
});
//4. 将路由对象挂在到Vue实例中
import router from './router'
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

//*************路由跳转******************
//要链接到一个命名路由：
//方法一： 可以给 router-link标签 的 to 属性传值
//例：
<router-link to="/login/小迟">登录</router-link>
//方法二：
//例：
this.$router.push("/register");

//路由匹配到的组件将显示到这里
<router-view></router-view>

//********路由获取参数***************
//只要将VueRouter实例对象挂在到Vue实例对象上，就可以通过this.$route拿到路由对象，只要能拿到路由对象，就可以通过路由对象拿到传递的参数
console.log(this.$route);

vue-router传参

vue-router的传值方式：
vue-router 传值可以通过url传值
url传值又有两种, params 和 query参数传值
- params传值是指的动态路由传值
  this.$route.params.name // 取值专门获取路由规则中path: ‘/login/:name’,这种params参数
- query传值指通过?后面的拼接参数传值
  this.$route.query.id // 取值获取 ?后面的参数 query参数查询字符
路由跳转携带参数：
```
this.$router.push({ 
   path:'/xxx', 
   name: 'xxxPage', // 对映路由配置页面的组件name,使用params字段时必须使用该字段，否则取不出来
   query: { id: '123' },
   params: { name: '小迟' }
 })
// 新页面参数获取：
// this.$route.params.name  '小迟'
// this.$route.query.id  '123'
```

3. 路由导航守卫

路由导航守卫
简单样例

const router =  new VueRouter({
  routes:[
    {
      path: '/register',
      name: 'register',
      component: register，
      beforeEnter: (to, from, next) => {
		// 单个路由独享的导航守卫
	  }
    }
  ]
})

router.beforeEach((to, from) => {
  // 全局导航守卫
})
...

// register组件
const register = {
  template: `...`,
  beforeRouteEnter(to, from) {
  	  // 组件内的导航守卫，通过路由规则
  },
  ...
}

参数解析：

to：目标路由对象；
from：即将要离开的路由对象；
next：

next参数详解：
1. next(): 进行管道中的下一个钩子函数。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
2. next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
3. next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
4. next(error): 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

当在一个组件中点击切换路由时的执行顺序：beforeRouterLeave–>beforeEach–>beforeEnter–>beforeRouteEnter–>beforeResolve–>afterEach–>vue组件生命周期 beforeCreate–>created–>beforeMount–>mounted–>beforeRouteEnter的next的回调
简单应用：使用全局前置守卫判断用户是否登录，如果没登陆跳转到登录页面，如果登陆了就可以跳转到目标界面