vue-router

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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项目中的简单使用

//*******在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) {
  	  // 组件内的导航守卫,通过路由规则
  },
  ...
}

参数解析:

  1. to:目标路由对象;

  2. from:即将要离开的路由对象;

  3. 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的回调

  • 简单应用:使用全局前置守卫判断用户是否登录,如果没登陆跳转到登录页面,如果登陆了就可以跳转到目标界面

### Vue Router 安装 为了使用 Vue Router,在项目中需先完成其安装。推荐的方式是利用 npm 或 yarn 来添加依赖: ```bash npm install vue-router # 或者 yarn add vue-router ``` 这一步骤确保了开发环境中有最新版本的 Vue Router 可供调用[^3]。 ### 配置 Vue Router 配置 Vue Router 主要涉及创建路由实例并将其挂载到 Vue 应用上。下面是一个简单的例子来展示如何设置基本的路由功能: ```javascript // 创建 routes.js 文件定义路径映射关系 import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, } ] const router = createRouter({ history: createWebHistory(), routes // 缩写为 `routes: routes` }) export default router; ``` 这段代码展示了如何导入必要的模块,定义页面组件对应的路径以及初始化路由器对象[^1]。 ### 使用 Vue Router 一旦完成了上述两步操作之后就可以在应用入口文件 main.js 中引入刚刚创建好的路由实例,并传给 Vue 实例: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样就成功集成了 Vue Router 到应用程序当中去了。 对于更复杂的场景比如嵌套路由、导航守卫等功能,则可以参阅官方文档获取更多指导。 ### 示例 这里给出一个完整的简单案例用于理解整个流程: #### 1. 安装 VueVue Router 假设已经有一个基于 Vue CLI 初始化的新工程,执行如下命令即可获得所需库支持: ```bash npm install vue@next vue-router@next ``` #### 2. 设置路由表 编辑 src/router/index.js 添加如下内容: ```javascript import { createRouter, createWebHashHistory } from "vue-router"; import HelloWorld from "../components/HelloWorld"; const routes = [{ path: "/", component: HelloWorld }]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router; ``` #### 3. 修改主程序启动逻辑 最后调整 src/main.js 如下所示: ```javascript import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; createApp(App).use(router).mount("#app"); ``` 以上就是关于 Vue Router 的快速入门指南,涵盖了从零开始构建带有路由功能的应用所需的全部知识点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值