位置: IT常识 - 正文
vue中实现路由跳转的三种方式（超详细整理）(vue实现路由跳转传参)
编辑：rootadminvue中实现路由跳转的三种方式（超详细整理） vue中实现路由跳转的三种方式一、使用vue-router
本文链接地址:https://www.jiuchutong.com/zhishi/297465.html
转载请保留说明！
推荐整理分享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.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值为准
二、上一篇：vue2和vue3区别(vue2和vue3区别面试题)
下一篇：纯代码22步绘制唯美的日夜交替动画（原生HTML+CSS+JS实现，CV即可运行+保姆级步骤教程）(代码简单图案)
