04_Vue Router

这篇具有很好参考价值的文章主要介绍了04_Vue Router。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

官网:Vue Router | Vue.js 的官方路由 (vuejs.org)

安装命令:npm install vue-router@4

1.添加两个页面\vuedemo\src\views\index.vue、\vuedemo\src\views\content.vue

2.添加\vuedemo\src\router\index.js文件用来定义路由规则

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

//定义路由
const routes = [
    {
        path: "/", // http://localhost:5173
        component: () => import("../views/index.vue")
    },
    {
        path: "/content", // http://localhost:5173/content
        component: () => import("../views/content.vue")
    },
]

const router = createRouter({
    //使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
    //history: createWebHashHistory(),  //哈希模式
    history: createWebHistory(),
    routes }) 

export default router

 文章来源地址https://www.toymoban.com/news/detail-844663.html

main.js 修改

import { createApp } from 'vue'

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'
//从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'

import router from './router'

const pinia=createPinia();
//将插件添加到 pinia 实例上
pinia.use(piniaPluginPersistedstate)

const app=createApp(App);
app.use(pinia);
app.use(router);
app.mount('#app');

 

app.vue

<script setup>

</script>

<template>
<router-view/>
</template>

<style  scoped>

</style>

 

配置路径别名@

修改路径别名文件:\vuedemo\vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' //导入 node.js path

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { //配置路径别名
      '@': path.resolve(__dirname, 'src')
    }
  }
})

 

 修改index.js路径

//定义路由
const routes = [
    {
        path: "/", // http://localhost:5173
        component: () => import("@/views/index.vue")
    },
    {
        path: "/content", // http://localhost:5173/content
        component: () => import("@/views/content.vue")
    },
]

这里就是把..修改成@

 

路径提示设置

添加\vuedemo\jsconfig.json文件

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"] // 配置 @ 符号指向 src 目录及其子目录
      }
    }
  }

 

路径传递参数

//定义路由
const routes = [
    {
        path: "/", // http://localhost:5173
        component: () => import("@/views/index.vue")
    },
    {
        path: "/content", // http://localhost:5173/content
        component: () => import("@/views/content.vue")
    },
    
    {
        path: "/user/:id", 
        component: () => import("@/views/user.vue")
    },
]

访问路径:

http://localhost:5173/content?name=张三&age=23

http://localhost:5173/user/5

<template>
<h3>Content页面.....</h3>
<br>
Name: {{ $route.query.name }} <br>
Age: {{ $route.query.age }}
</template>
<template>
Id: {{ $route.params.id }} <br>
</template>

 

 

index.vue 转到content.vue

index.vue

<script setup>
 import { useRouter } from 'vue-router';
        const router = useRouter()
        const goTo = ()=> {
            //router.push("/content?name=张三&age=23")
            router.push({ path: '/content', query: { name: '李四', age: 26 } })
        }
</script>

<template>
<h3>Index页面......</h3>
<br>
<!-- 编程式导航 -->
<button @click="goTo()">编程式导航</button>
</template>

<style  scoped>

</style>

content.vue

<script setup>

</script>

<template>
<h3>Content页面.....</h3>
<br>
Name: {{ $route.query.name }} <br>
Age: {{ $route.query.age }}
</template>

<style  scoped>

</style>

 

嵌套路由结合共享组件

添加页面:

\vuedemo\src\views\vip.vue

\vuedemo\src\views\vip\default.vue

\vuedemo\src\views\vip\info.vue

\vuedemo\src\views\vip\order.vue

\vuedemo\src\views\svip.vue

修改index.js

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

//定义路由
const routes = [
    {
        path: "/", // http://localhost:5173
        alias:["/home","/index"],
        component: () => import("@/views/index.vue")
    },
    {
        path: "/content", // http://localhost:5173/content
        component: () => import("@/views/content.vue")
    },
    
    {
        path: "/user/:id", 
        component: () => import("@/views/user.vue")
    },
    {
        path: "/vip", 
        component: () => import("@/views/vip.vue"),
        children: [ // 子路由
            {
                path: '', // 默认页 http://localhost:5173/vip
                component: import("@/views/vip/default.vue")
            },
            {
                path: 'order', // 会员订单 http://localhost:5173/vip/order
                component: import("@/views/vip/order.vue")
            },
            {
                path: 'info', // 会员资料 http://localhost:5173/vip/info
                component: import("@/views/vip/info.vue")
            }
        ]
    },
    {
        path: "/svip", // http://localhost:5173/svip
        redirect: "/vip" // 重定向
        //redirect: { name: 'history', params: { id: '100', name: 'David' } }
    },
]

const router = createRouter({
    //使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
    //history: createWebHashHistory(), 
    history: createWebHistory(),
    routes
})

export default router

访问:http://localhost:5173/vip/、http://localhost:5173/vip/info、http://localhost:5173/svip/ (重定向)

 

到了这里,关于04_Vue Router的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 04_Vue Router

    官网:Vue Router | Vue.js 的官方路由 (vuejs.org) 安装命令:npm install vue-router@4 1.添加两个页面vuedemosrcviewsindex.vue、vuedemosrcviewscontent.vue 2.添加vuedemosrcrouterindex.js文件用来定义路由规则   main.js 修改   app.vue   配置路径别名@ 修改路径别名文件:vuedemovite.config.js    修改

    2024年04月08日
    浏览(29)
  • Vue3 - 实现路由 “新开一页“ 进行页面跳转功能,Router 路由跳转时在新窗口打开页面(网站跳转页面时浏览器新开页签打开网页,支持在页面、纯 js/ts 文件中使用,详细示例代码教程)

    网上这方面教程很少,本文提供多种解决方案,适用于任何场景。 本文 实现了在 vue3 项目开发中,当页面跳转时浏览器打开新窗口(新页签)跳转,Router 路由跳转并新开一页教程, 无论您是在普通页面、纯 js/ts 文件中,都可以使用, 如下图所示,当执行路由跳转时浏览器

    2024年02月03日
    浏览(60)
  • Vue Router不要再使用params传参了,params获取不到参数,官方删除params传参

    之前说过,vue路由传参有两种方式,分别是 query 和 params ;query是明文,params是隐藏的; 今天在使用params的时候发现获取不到参数了 我的写法: 1、 路由配置: 2、跳转: 3、接收: 4、结果: 得到一个警告和空对象 查看链接4.1.4更新日志发现官方做了删除替代,那这样的话

    2024年02月10日
    浏览(76)
  • vue Router路由

    是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括: 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 CSS 类的链接 HTML5 his

    2024年02月07日
    浏览(34)
  • 路由vue-router

    路由(英文:router)就是 对应关系 SPA 指的是一个 web 网站只有 唯一的一个 HTML 页面 ,所有组件的展示与切换都在这唯一的一个页面内完成。 此时,不同组件之间的切换需要通过前端路由来实现。 结论: 在 SPA 项目中,不同功能之间的切换 ,要依赖于 前端路由 来完成!

    2024年02月07日
    浏览(42)
  • vue路由及参数router

    1.1 如果还没安装node.js, 则先安装node.js ,安装完成后,查看node版本 1.2 安装淘宝镜像, 安装完成后查看npm版本:npm -v 1.3 安装webpack 1.4 安装vue全局脚手架,vue-cli2.x使用 npm install -g vue-cli , vue-cli3.x使用 npm install -g @vue/cli 安装, 查看vue版本: vue -V 1.5 准备工作做好了,开始正

    2024年01月23日
    浏览(39)
  • Vue全家桶(四):Vue Router 路由

    1.1 Vue Router的理解 Vue的一个插件库,专门用来实现SPA应用 1.2 对SPA应用的理解 单页 Web 应用 (single page web application,SPA 整个应用只有一个完整的页面 点击页面中的导航链接不会刷新页面,只会做页面的局部更新 数据需要通过 ajax 请求获取 1.3 路由的理解 什么是路由? 一个路

    2024年02月09日
    浏览(89)
  • vue3使用vue-router嵌套路由(多级路由)

    Vue3 嵌套路由的使用和 Vue2 相差不大,主要的区别是 Vue3 的路由实例化使用了 createApp() 方法,所以实例化路由时需要传入根组件。另外,Vue3 的路由对象除了包含 Vue2 中的导航守卫、导航钩子和解析守卫等功能外,还新增了 meta prop 和 route prop。 在使用嵌套路由时,建议将路由

    2024年02月03日
    浏览(50)
  • Vue Router 路由动态缓存组件

    Vue Router 允许你缓存路由组件,这样在用户导航回之前的页面时,组件的状态会被保留而不是重新渲染。这可以通过使用 keep-alive 组件来实现。 keep-alive 是一个内置抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 它的主要作用是缓存不活动的组件实例,

    2024年04月16日
    浏览(35)
  • vue-router路由守卫

    在我们使用vue-router的时候,路由守卫就像监听器、拦截器一样,帮我们做一些鉴权等操作,vue中的路由守卫分为全局路由守卫、独享路由守卫、组件内的路由守卫 全局路由守卫 : beforeEach、 afterEach 组件独享路由守卫 :beforeEnter、 beforeLeave 组件内路由守卫 :beforeRouteEnter、

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包