安装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 Router使用

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

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

然后就是添加路由链接，<router-link></router-link>标签默认渲染为标签，to属性渲染为href属性。

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

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

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

至于为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目npm run build 打包后，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以写的<a></a>标签跳转页面是不起作用的，必须使用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>

下面补充下<router-link>所有属性及说明

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

四十三、在Vue使用router，路由的管理相关推荐

vue admin 动态路由权限管理
主要思路通过后端接口返回数据进行判断 (通过后端实现的权限管理有许多种),在这里我们主要通过关键字即匹配前端路由meta.menu值来实现权限管理通常会把路由权限列表存至vux中箭头所指的便 ...
Vue Router 路由管理
文章目录 Vue Router 路由管理概述安装简单使用定义2个组件定义路由信息支持路由使用路由动态路由配置动态路由配置404 限制动态参数嵌套路由命名路由编程式导航简单使 ...
Vue学习之路由(Router)
Vue学习之路由(Router) 文章目录 Vue学习之路由(Router) 一.路由是什么? 二.Vue Router的安装 1.直接下载/CDN 2.NPM安装三.路由的基础使用 1.定义路 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
四 Vue学习 router学习
index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...
Vue+axios（interceptors）实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果...
axios interceptors 拦截器 //interceptors.js// vue axios配置发起请求加载loading请求结束关闭loading // http request 请求 ...
vue 传递对象路由_vue 04 -vue路由对象（$route）参数简介以及和router的区别
vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...
vue router 路由鉴权（非动态路由）
概述角色:超级管理员.主题管理员.数据服务管理员权限: 超级管理员:所有页面主题管理员:基础公共页面+主题设置页数据服务管理员:基础公共页面+数据服务设置页+数据服务审批页需求:角色菜单来自 ...
vue工程化与路由router
一.介绍 vue.js 是目前最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具如vue-router .vu ...

四十三、在Vue使用router，路由的管理

文章目录

安装Vue Router

Vue Router使用

代码实战

四十三、在Vue使用router，路由的管理相关推荐

最新文章

热门文章