位置: IT常识 - 正文
Vue Router的简单了解(vue–router)
发布时间：2024-01-27推荐整理分享Vue Router的简单了解(vue–router)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue–router,vue router教程,vue–router,vue router用法,vue router routes,vue $route $router,vue router教程,vue-router,内容如对您有帮助，希望把文章链接给更多的朋友！
Vue Router官方文档
传统Web项目开发往往采用超链接实现页面之间的切换和跳转。Vue开发的是单页面应用(Single Page Application,SPA)，不能使用超链接<a>标记实现切换和跳转。因为项目打包后(npm run build)，就会产生dist文件夹，该文件夹中只有静态资源和一个index.html文件，所以使用<a>标记是不会生效的。此时必须使用Vue Router进行管理。在Vue Router单页面应用中，路径之间的切换就是组件的切换。路由模块的本质就是建立起URL和页面之间的映射关系。
安装与使用npm install vue-router@3 //vue2的安装命令如果不进行版本号的指定，直接执行npm install vue-router，控制台会报如下错误：
其实就是vue-router默认版本号为4，在vue2中不能安装高版本的vue-router
新建router的配置文件
在router/index.js中写router配置项
// 引入VueRouterimport VueRouter from 'vue-router'// 引入组件import About from '../components/About'import Home from '../components/Home'const router = new VueRouter({routes:[{path: '/about',component: About},{path: '/home',component: Home}]})//暴露routerexport default router在main.js中该路由配置文件
import Vue from 'vue'import App from './App.vue'//引入VueRouterimport VueRouter from 'vue-router'//引入路由器import router from "./router";Vue.config.productionTip = falseVue.use(VueRouter)new Vue({ render: h => h(App), router}).$mount('#app')
Home组件
<template><div> <h3>首页部分</h3></div></template>About组件
<template><div> <h3>关于部分</h3></div></template>在app.vue中进行路由的切换及相应页面的显示
<template> <div id="app"> <p><!-- 使用router-link实现路由切换--> <router-link to="/home">首页</router-link> <br> <router-link to="/about">关于</router-link> </p><!-- 指定组件的呈现位置--> <router-view></router-view> </div></template>通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载
每个组件都有自己的$route属性，里面存储着自己的路由信息
整个应用只有一个router，可以通过组件的$router属性获取到
路由中有3个基本概念：route、routes、router
route是一条路由，使用{...}定义，内含两个基本属性:path和component,实现路由与组件的映射routes是一组路由，把每条路由组合起来，形成一个数组，类似于[route1,route2,...]router是路由管理器，用来管理路由嵌套路由配置路由规则，使用children配置项
routes:[{path: '/about',component: About},{ path: '/home', component: Home, children:[ { path: 'news', component: News }, { path: 'message', component: Message } ] }]跳转（要写完整路径）
<router-link to="/home/news">News</router-link>query参数传递参数
//写法一<router-link :to=`/home/message/detail?id=${m.id}&title=${m.title}`>跳转</router-link>//写法二<router-link :to="{path: '/home/message/detail',query:{id: m.id,title: m.title}}">跳转</router-link>接收参数: $route.query.id $route.query.title
name属性简化路由跳转routes:[{name: 'guanyu', //通过name属性简化跳转的路由地址path: '/about',component: About},{ path: '/home', component: Home, children:[ { path: 'news', component: News }, { name: 'xiaoxi', //通过name属性简化跳转的路由地址 path: 'message', component: Message } ] }]简化后的跳转
<router-link :to="{name: 'xiaoxi'}">跳转</router-link><router-link :to="{name: 'xiaoxi',query:{id: m.id,title: m.title}}">跳转</router-link>params参数配置路由，
上一篇：帝国CMS如何设置默认自动分页(帝国cms建站教程)
下一篇：帝国CMS商城系统如何实现在线支付后发送订单邮件提醒功能(帝国cms使用手册)
