四十三、在vue使用router，路由的管理 -尊龙游戏旗舰厅官网

@author：runsen
@date：2020/7/17

管理路由是一项必不可少的功能。今天，runsen学习vue router。

文章目录

• 安装vue router
• vue router使用
• 代码实战

vue router（尊龙游戏旗舰厅官网：https://router.vuejs.org/zh/）是vue.js官方的路由管理器。

它和vue.js的核心深度集成，可以非常方便的用于spa应用程序的开发。

spa就是 单页web应用（single page web application，spa），就是只有一张web页面的应用。 vue-router是vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

在普通项目中引入vue.js和vue-router.js

在脚手架中import router from './router'，安装就是npm install vue-router --save-dev

然后就是添加路由链接，标签默认渲染为标签，to属性渲染为href属性。

<router-link to="/hello">打开hello</router-link>

router-link组件默认会在页面生成一个a标签，点击会跳转到to属性对应的地址

添加路由填充位，，将通过路由匹配到的组件渲染到router-view所在的位置

至于为啥不能用a标签，这是因为用vue做的都是单页应用（当你的项目npm run build 打包后，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以写的标签跳转页面是不起作用的，必须使用vue-router来进行管理。

下面runsen创建一个vue项目，使用命令vue init webpack router，在创建项目的时候选择router。

这样在src文件夹下新增一个router文件夹，里面添加一个index.js文件

第一步设置index.js，就是两个路由

import vue from 'vue' import router from 'vue-router' import home from '../components/home' import about from '../components/about'vue.use(router)export default new router({routes: [{path: '/about',name: 'about',component: about,meta: {id: '2'}},{path: '/',name: 'home',component: home,meta: {id: '1'}}] })

main.js的在创建的项目的时候，因为选中了router，所以不需要导入router。

第二步创建两个组件，home.vue和about.vue，在加上app.vue主视图。

home.vue

<template><div class=""><div>home</div><router-link :to="{name: 'about', params: {a: 1, b: 2}}">跳转到about</router-link><div @click="$router.push({name: 'about', params: {c: 3, d: 4}})">点我也可以跳转</div></div> </template>

about.vue

<template><div class="">参数为：{{$route.params}}</div> </template>

app.vue

<template><div id="app">当前路由id：{{$route.meta.id}}<router-view></router-view></div> </template>

下面补充下所有属性及说明

属性说明

to(必须)	目标路由地址。
replace	替换当前路由，在历史记录栈中，用当前路由地址替换上一个路由地址。
append	目标路由地址为相对路径时有效，添加该属性，则在当前路径前添加基路径。
tag	默认值：“a”，router-link组件渲染在页面上的标签名称。
active-class	默认值：“router-link-activve”，链接激活时使用的css类名。

总结

以上是尊龙游戏旗舰厅官网为你收集整理的四十三、在vue使用router，路由的管理的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。