vue中实现路由跳转的三种方式（超详细整理）(vue实现路由跳转传参)

编辑：rootadmin

vue中实现路由跳转的三种方式（超详细整理） vue中实现路由跳转的三种方式一、使用vue-router

推荐整理分享vue中实现路由跳转的三种方式（超详细整理）(vue实现路由跳转传参)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue实现路由跳转的方式,vue中实现路由跳转,vue实现路由跳转页面代码,vue实现路由跳转页面代码,vue实现路由跳转的方法,vue实现路由跳转的方法,vue实现路由跳转的方法,vue实现路由跳转的方法,内容如对您有帮助，希望把文章链接给更多的朋友！

vue-router 本质是一个第三方的包用的时候需要下载

步骤（7步法）：

下载vue-router模块到当前工程

yarn add vue-router

在main.js中引入VueRouter函数

// 引入路由import VueRouter from "vue-router"; vue中实现路由跳转的三种方式（超详细整理）(vue实现路由跳转传参)

添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件

// 注册全局Vue.use(VueRouter)

创建路由规则数组 – 路径和组件名对应关系

创建路由规则数组（需要准备切换的页面组件）把准备好的页面组件引入到main.js中

const routes = [{ path: "/", redirect: "find" //默认显示推荐组件(路由的重定向) }, { path: "/find", name: "Find", component: Find, //二级路由 children: [{ path: "/", redirect: "recom" //默认显示推荐组件 }, { path: "ranking", //注意二级路由的路径千万不要加/ component: Ranking }, { path: "songlist", component: SongList }, ] }, { path: "/my", name: "My", component: My }, { path: "/part", name: "Part", component: Part }, { path: "*", component: NotFound //定义找不到已有组件时显示404 }, ]

用规则生成路由对象

// 创建路由对象并且传入规则const router = new VueRouter({ routes, mode: "history" //路由模式(默认为hash模式)})

把路由对象注入到new Vue实例中

new Vue({ router, //导入路由对象 render: h => h(App),}).$mount('#app')

用router-view作为挂载点, 切换不同的路由页面

当url的hash值路径切换，显示规则里对应的组件

router-view 实现路由内容的地方，引入组件时写到需要引入的地方需要注意的是，使用vue-router控制路由则必须router-view作为容器。（可以先引入根组件App.vue中进行自测）

注意: 一切都要以url上hash值为准

二、

本文链接地址:https://www.jiuchutong.com/zhishi/297465.html 转载请保留说明！

上一篇：vue2和vue3区别(vue2和vue3区别面试题)

下一篇：纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）(代码简单图案)