Vue Router的简单了解(vue–router)

🍀Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转。Vue开发的是单页面应用(Single Page Application,SPA)，不能使用超链接<a>标记实现切换和跳转。 因为项目打包后(npm run build)，就会产生dis ... ?Vue Router

推荐整理分享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参数

配置路由，