vue Router路由

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

编程式导航 | Vue Router

看官方文档

vue Router

是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

1.安装路由组件

建立项目时  npm init vue app   cnpm install vue-router@4 --save

vue Router路由,vue.js,前端,javascript

2.编写路由脚本

在项目的src/router/index.js 或者 index.ts

import {createRouter, createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/about',
component: () => import('../views/About.vue')
}, {
path: '/home',
component: Home,
}, {
path: '/',
redirect: '/home'
}, {
path: '/login',
component: () => import('../views/Login.vue')
}, {
path: '/user',
component: () => import('../views/User.vue'),
redirect: '/user/manager',
children: [
{path: 'add', component: () => import('../views/UserAdd.vue')},
{path: 'show', component: () => import('../views/UserShow.vue')},
{path: 'manager', component: () => import('../views/UserManager.vue')},
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router

App.vue

<template>
<h3>项目首页</h3>
<hr>
<router-link to="/home">首页</router-link> &nbsp;
<router-link to="/login">登录</router-link> &nbsp;
<router-link to="/user">用户管理</router-link>&nbsp;
<router-link to="/about">关于我们</router-link>
<hr>
<router-view/>
</template>

User.vue

<template>
<h3>用户管理</h3>
<hr>
<router-link to="/user/add">添加用户</router-link>&nbsp;
<router-link to="/user/show">查看用户</router-link>&nbsp;
<router-link to="/user/manager">管理用户</router-link>&nbsp;
<hr>
<router-view/>
</template>

3.入口main.js导入使用

在src/main.js入口文件中

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

route 重定向redirect

404

嵌套路由,子路由

在Goods.vue组件中,声明router-link 和 子路由视口rounter-view

<template>
<h1>商品中心,商品列表</h1>
<br>
<br>
<router-link to="/goods/show">商品查看</router-link>&nbsp;
<router-link to="/goods/add">添加商品</router-link>&nbsp;
<router-link to="/goods/manager">商品管理</router-link>
<hr>
<router-view/>
</template>
Wechat:webrxwp - Mobile:13014577033 - Email:webrx@126.com - QQ:7031633 

a

{
path: '/goods',
component: () => import('../views/Goods.vue'),
//默认进入子路由manager
redirect: '/goods/manager',
children: [
{path: 'show', component: () => import('../views/GoodsShow.vue')},
{path: 'add', component: () => import('../views/GoodsAdd.vue')},
{path: 'manager', component: () => import('../views/GoodsManager.vue')},
]
}

编程式导航

原来的路由导航方式为声明式导航,编程式导航,是通过路由组件对象的api编程方式,直接路由访问。 router.push(url) router.go(-1) router.back()

<template>
<h1>首页</h1>
<button @click="goa(10)">about/10</button>
<button @click="goback(-3)">go-back</button>
</template>
<script lang="ts" setup>
import {useRouter} from 'vue-router'
const router = useRouter()
const goa = id => {
router.push(`/about/${id}`)
}
const goback = n =>{
router.go(n)
}
</script>
<style scoped>
</style>


// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })

命名路由

定义路由 name:'about 命名

, {
path: '/about/:id(\\d+)',
name: 'about',
component: () => import('../views/About.vue'),
props: true
}

使用声明式导航

<router-link :to="{name:'about',params:{id:10}}">about/10</router-link>

编程式导航

// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'about', params:{ id: 10 }})

路由守卫

全局导航守卫会拦截每个路由规则,从而对每个路由访问权限的控制文章来源地址https://www.toymoban.com/news/detail-732985.html

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

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

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

相关文章

  • Vue 2和Vue 3路由Router创建的区别简记(在main.js文件中引入的区别和router的js文件中创建语法的区别)

    1、版本的搭配: Vue 2到Vue 3的改版升级,同样的带来Vue Router的升级。创建Vue项目之后,我们可以在package.json文件中看到,Vue 2创建的项目往往是与Vue Router 3.X版本搭配的,而Vue 3创建的项目与Vue Router 4.X版本搭配。 Vue 3搭配Vue Router 4.X版本: Vue 2搭配Vue Router3.X版本: 2、在main

    2024年02月08日
    浏览(60)
  • 【前端面经】Vue-Vue Router 路由有哪些模式?各模式有什么区别?

    Vue Router 是一个轻量级的前端路由库,它提供了三种路由模式,每种模式都适用于不同的场景。本文将详细介绍这三种模式的优缺点和适用场景,以便读者在使用 Vue Router 时进行选择。 在 hash 模式下,URL 中的 hash 值作为路由路径。该模式可以兼容较老的浏览器,并且无需后端

    2024年02月03日
    浏览(41)
  • 基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

    1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的

    2024年02月02日
    浏览(71)
  • Vue3+Vue-Router+Element-Plus根据后端数据实现前端动态路由——权限管理模块

    提示:文章内容仔细看一些,或者直接粘贴复制,效果满满 提示:文章大概 1、项目:前后端分离 2、前端:基于Vite创建的Vue3项目 3、后端:没有,模拟的后端数据 4、关于路径“@”符号——vite.config.js 文件里修改 提示:以下是本篇文章正文内容,下面案例可供复制粘贴使用

    2024年02月02日
    浏览(64)
  • Vue入门六(前端路由的概念与原理|Vue-router简单使用|登录跳转案例|scoped样式|混入(mixin)|插件)

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

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

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

    2024年02月03日
    浏览(66)
  • vue Router路由

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

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

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

    2024年02月07日
    浏览(43)
  • 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日
    浏览(41)
  • 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)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包