Vue3---Vue3项目切换(设置)路由模式

谁践踏了优雅 2022-10-29 13:29 444阅读 0赞

*  history模式：在路由index.js文件中导入 createWebHistory

import { createRouter, createWebHistory } from 'vue-router'
    import Home from '../views/Home.vue'
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router

*  hash模式：在路由index.js文件中导入 createWebHashHistory

import { createRouter, createWebHashHistory } from 'vue-router'
    import Home from '../views/Home.vue'
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
    
    const router = createRouter({
      history: createWebHashHistory(process.env.BASE_URL),
      routes
    })
    
    export default router

发表评论取消回复

表情：

评论列表（有 0 条评论，444人围观）

还没有评论，来说两句吧...

相关阅读

相关一、vue学习笔记：vue-cli3创建vue项目，并配置路由

文章目录 * * 1、安装nodejs * 2、查看版本号： * * 2.1配置npm在安装全局模块时的路径和缓存cache的路径...

我就是我/ 2024年04月17日 21:13/ 0 赞/ 76 阅读

相关 Vue路由模式

聚沙成塔·每天进步一点点本文内容 ⭐ 专栏简介路由模式 1. Hash 模式 2. History 模式选择路

小灰灰/ 2024年04月06日 15:32/ 0 赞/ 84 阅读

相关 vue3查看当前路由

import { useRouter } from "vue-router" const router = useRouter() console.lo

川长思鸟来/ 2024年03月26日 17:54/ 0 赞/ 74 阅读

相关 vue3使用vue-router嵌套路由(多级路由)

文章目录 1、Vue3 嵌套路由 2、项目结构 3、编写相关页面代码 3.1、编写route文件下 index

Love The Way You Lie/ 2024年02月05日 16:27/ 0 赞/ 48 阅读

相关 Vue3---Vue3项目切换(设置)路由模式

history模式：在路由index.js文件中导入 createWebHistory import { createRouter, createWebHist

谁践踏了优雅/ 2022年10月29日 13:29/ 0 赞/ 445 阅读

相关 Vue 3路由跳转

import { useRouter } from 'vue-router'; export default { setup() {

ゝ一纸荒年。/ 2022年10月09日 02:43/ 0 赞/ 316 阅读

相关 vue3 配置路由

使用 vue3 配置路由，步骤如下 1、安装路由 npm install vue-router@4 笔者这里的演示项目名称是 vue3-project !

超、凢脫俗/ 2022年10月06日 01:56/ 0 赞/ 261 阅读

相关 VUE3路由Router导航、模式

> 路由守卫也称为导航守卫，用来对路由导航进行守卫，控制导航的跳转，可以进行权限的控制，分为： > > 1、全局前置守卫：使用router.beforeEach > 2、

川长思鸟来/ 2022年09月07日 14:39/ 0 赞/ 245 阅读

相关 VUE3路由传参数

字符串传参数： > 通过<router-link>的to顺序传递参数 > > 俩种方式： > 1、查询字符串 > 2、Rest风格传参数 > 字符串形式： >

叁歲伎倆/ 2022年09月07日 14:38/ 0 赞/ 310 阅读

相关 VUE3 Router路由

> 使用Vue Router可以在不同的组件间切换，根据不同的url地址，路由跳转到不同的组件 > > 提供了俩个路由组件 > > <router-link>:用来定义导航

谁践踏了优雅/ 2022年09月07日 09:49/ 0 赞/ 235 阅读