vue3路由Router的配置和跳转


  • 本人最近在找工作,有推荐的小伙伴私我,不胜感激。

一、介绍

  • SPA(single page application):单页面应用,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。核心之一就是: 更新视图而不重新请求页面
  • vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式
    • hash:默认,hash(#)是URL的锚点,代表的是网页中的一个位置,比如 localhost:8093/#/hello、localhost:8093/#/hi,hash值分别为#/hello、#/hi
      改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,因此改变 hash 不会重新
      加载页面
    • history:url中没有#,这种模式充分利用了html5 history interface 中新增的pushState、 replaceState方法,这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求
    • 当使用history模式时,需要后端支持(nginx-try_files),否则路由组件页面刷新会404
    • 两者在引用静态资源文件时也有区别
  • 路由,就是指向的意思,主要是构建 SPA (单页应用)时,方便渲染你指定路由对应的组件,比如:请求/hello,就访问hello.vue组件,请求/hi,就访问hi.vue组件
  • SPA只有一个index.html入口url,其他url都是通过前端路由跳转的

二、配置

1、配置路由

  • 路由配置文件:src/router/index.js
  • Router是Vue.js官方的路由管理器,管理routes中定义的路由
//引入:createRouter(Router);createWebHistory(history模式);createWebHashHistory(hash模式)
import { createRouter, createWebHistory } from 'vue-router'

//routes是一组路由,把里面每一条路由组合起来,形成一个数组
const routes = [
  //注册一个路由
  {
    //相当于给path取个别名,方便使用,不写默认为default,路由跳转时可以使用
    name: 'About',
    //meta:头部信息;title:标签页名称;activeMenu:激活菜单的path
    meta: {title: '首页', activeMenu: '/result/result_survey'},
    //自定义访问的url,不要包含或等于 vue.config.js 中的proxy
    //path不能重复,否则[Vue warn]: Duplicate keys detected: '/'. This may cause anupdate error
    path: '/about',
    /**
      * 该url指向的组件
      *  引入组件两种方式
      *    1、import:webpack打包时路由里的所有component都会打包在一个js中,页面多的话,这个文件会很大,造成进入首页时,需要加载的内容过多,时间相对比较长
      *      import screen from "@/components/screen"
      *      component: screen
      *
      *    2、路由懒加载,两种写法,会将component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js
      *      component: (resolve) => require(['@/components/screen'], resolve)
      *      component: () => import('@/views/Home.vue')
     */
    component: () => import('@/views/About.vue')
  },
  //同一个目录下多个菜单
  {
    path: '/qte',
    component: Layout,
    hidden: true,
    children: [
        {
            //localhost:8080/system/dept
            name: 'Dept',
            meta: {title:'部门列表'},
            path: 'dept',
            component: (resolve) => require(['@/views/system/dept/index'], resolve)
        },
        {
            //localhost:8080/system/user
            name: 'User',
            path: 'user',
            meta: {title:'用户列表'},
            component: (resolve) => require(['@/views/system/user/index'], resolve)
        }
    ]
  }
]

const router = createRouter({
  //history模式
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2、全局挂载

  • 监听地址栏的改变,修改项目中的router-view组件应该加载的组件
  • src/main.js
//引入router
import router from './router'

//router实例注入到vue根实例
createApp(App)
    .use(router)
    .mount('#app')

3、使用

  • App.vue
<template>
  <router-view/>
</template>

三、跳转

1、JS

//引入路由
import { useRouter } from "vue-router"

export default {
    name: "Screen",
    setup(){
        //定义router对象
        const router=useRouter()
        //router对象的属性
        {
          addRoute:
          afterEach:
          //返回上一个页面
          back:() => go(-1)
          beforeEach:
          beforeResolve:
          //当前的路由信息
          currentRoute:{
            value:{
              //path
              fullPath: "/screen?id=1",
              hash: "",
              href: "/screen?id=1",
              matched: [{}]
              //meta
              meta: {title: '大屏'}
              //name
              name: "Screen"
              //params
              params: {}
              //path
              path: "/screen"
              //query
              query: {id: '1'}
              redirectedFrom: undefined
            }
          }
          //下一个页面
          forward:() => go(1)
          getRoutes:
          go:
          hasRoute:
          install:
          isReady:
          listening:
          onError:
          options:
          push:
          removeRoute:
          replace:
          resolve:
        }
        
        /**
         * 1、query
         * url:http://localhost:8081/screen?id=1
         */
        //传参
        router.push({name:'Screen',query: {id:1}})
        //接收
        const id=router.currentRoute.value.query.id

        /**
         * 2、params
         * 路由配置的path:path: '/screen/:id/:name'
         * url:http://localhost:8081/screen/1/kimi
         *
         */
        //传参
        router.push({name:'Screen',params: {id:1,name:'kimi'}})
        //接收
        const name=router.currentRoute.value.params.name

        //返回上一页面,利用router对象提供的back方法
        function jumpBack(){
            router.back()
        }

        return{
            id,
            name,
            jumpBack
        }
    }
}

2、router-link

  • 也是两种:query、params,和js的传参参数一样
<template>
  <div class="home">
    <router-link :to="{name:'Screen',params: {id:1,name:'kimi'}}">Screen</router-link>
  </div>
</template>
  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 3 中,你可以使用 Vue Router 进行路由跳转。下面是一些基本的步骤: 1. 首先,确保你已经安装了 Vue Router。你可以通过运行以下命令来安装它: ``` npm install vue-router@next ``` 2. 在你的主文件(例如 `main.js` 或 `main.ts`)中导入 Vue Router 和你的路由配置: ```javascript import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue'; import Home from './views/Home.vue'; import About from './views/About.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = createRouter({ history: createWebHistory(), routes }); const app = createApp(App); app.use(router); app.mount('#app'); ``` 在上面的示例中,我们创建了两个路由:`/` 对应 `Home` 组件,`/about` 对应 `About` 组件。你可以根据自己的需求添加更多的路由。 3. 在你的组件中使用路由跳转,你可以使用 `<router-link>` 组件或 `$router.push` 方法。 使用 `<router-link>` 组件: ```html <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> ``` 使用 `$router.push` 方法: ```javascript // 在方法中调用 methods: { goToHome() { this.$router.push('/'); }, goToAbout() { this.$router.push('/about'); } } // 或者在模板中调用 <button @click="$router.push('/')">Go to Home</button> <button @click="$router.push('/about')">Go to About</button> ``` 这样,当用户点击链接或按钮时,路由就会进行跳转。 这只是一个基本的示例,你还可以使用更多的 Vue Router 功能,如路由参数、嵌套路由路由守卫等。你可以参考 Vue Router 的官方文档来了解更多信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kimi-001

只想在有限的时间分享更多的知识

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值