VueRouter基础
安装
- 直接下载（官方CDN）
https://unpkg.com/vue-router/...
通过页面script标签引入，如下：
<script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>- NPM安装
npm install vue-router --save-dev安装完成后需要Vue.use()安装此功能，例如：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);入门
- 简单例子
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue1217</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<App.vue>
<template>
<div>
<p>
<router-link to="/foo">Foo Link</router-link>
<router-link to="/bar">Bar Link</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script type="text/ecmascript-6">
export default {};
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
<main.js>
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
Vue.use(VueRouter);
const foo = {
template: '<div>foo</div>'
};
const bar = {
template: '<div>bar</div>'
};
const routes = [{
path: '/foo',
component: foo
}, {
path: '/bar',
component: bar
}];
let router = new VueRouter({
routes
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});
- 动态路由匹配
通过带有冒号标记的属性匹配，例如
path: '/foo/test0'
path: '/foo/test1'
都可以被
path： '/foo/:id'
匹配到
并且被匹配到的组件内部可以通过
this.$route.params获取到被匹配的参数
如上：
test0组件下的params参数为
{
id: 'test0'
}
同样的:
/foo/test0/jason/0411
被
/foo/:id/:name/:birth
匹配到的参数如
{
id: 'test0',
name: 'jason',
birth: '0411'
}小提示：对于通过路由进行组件间的切换时，并不会来回构建组件实例，而是复用已存在的组件，想要监听路由参数变化可以通过watch属性或者通过beforeRouteUpdate钩子函数做操作
{
watch: {
'$route'(to, from) {
// something to do
}
}
}
{
beforeRouteUpdate(to, from, next) {
// something to do
next();// next必须执行不然的话beforeRouteUpdate钩子函数不会resolved
}
}- 嵌套路由
顾名思义就是路由跳到的组件又包含有路由。
举个栗子：
<App.vue>
<template>
<div>
<p>
<router-link to="/foo">foo</router-link>
<router-link to="/foo1/hm">foo1</router-link>
<router-link to="/foo2/pf">foo2</router-link>
<router-link to="/foo3/ps">foo3</router-link>
</p>
<router-view></router-view>
</div>
</template>
const foo = {
template: `
<div>
<p>{{ $route.params.id }}</p>
<router-view></router-view>
</div>
`
};
<main.js>
const home = {
template: '<div>home</div>'
};
const hm = {
template: '<div>hm</div>'
};
const pf = {
template: '<div>pf</div>'
};
const ps = {
template: '<div>ps</div>'
};
const routes = [{
path: '/:id',
component: foo,
children: [
{
path: '',
component: home
}, {
path: 'hm',
component: hm
}, {
path: 'pf',
component: pf
}, {
path: 'ps',
component: ps
}
]
}];- 通过$router导航
在组件Vue实例内部可以通过
this.$router.push(location, onComplete?, onAbort?)
this.$router.replace(location, onComplete?, onAbort?)
this.$router.go(n)
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)- 命名路由
在创建路由的时候可以通过name属性设置路由名称
let routes = [{
path: '/foo/:userId',
name: 'test',
component: User
}];如果需要链接到这个命名路由我们可以酱紫
<router-link :to="{ 'name' : 'test', 'params' : { 'userId' : 410100 }}"></router-link>也可以酱紫
router.push({
name: 'test',
params: {
userId: 410100
}
});- 命名视图
很多时候我们会碰到并存的多个视图（router-view)，我们就需要为视图设置name没有设置的为default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>当然构建路由的时候也需要设置对应视图的组件映射
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})- 重定向
let routes = [{
path: '/',
redirect: '/goods'
},{
path: '/goods',
component: goods
}];
当path为/的时候会自动重定向至/goods加载goods组件
当然也可以通过name重定向,作用是相同的
let routes = [{
path: '/',
redirect: {
name: 'goods'
}
},{
path: '/goods',
name: 'goods',
component: goods
}];
当然也可以是一个方法
let routes = [{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}];- 别名
别名与重定向只有一丢丢不同，重定向指/a路径调到/b路径加载，别名指还是加载/a路径只是加载内容是/b路径下的
const router = new VueRouter({
routes: [{
path: '/a',
component: A,
alias: '/b'
}]
});5.路由参数传递
有三种模式进行传递：布尔模式、对象模式、函数模式
布尔模式: 如果props被设置为true，route.params将会被设置为组件属性。
router-link的路径
<router-link to="/foo/params">foo</router-link>
foo的路由
{
path: '/foo/:userName',
name: 'foo',
component: foo,
props: true
}
foo组件
<template>
<div>
foo
<div>{{userName}}</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
props: {
userName: {
type: String,
default: ''
}
}
};
</script>点击router-link后的结果
你会发现/foo/params被path匹配后
route.params = {
userName: 'params'
};props中的userName就会接收到字符串'params'，因此输出结果如图所示
对象模式：如果props是一个对象，它会被按原样设置为组件属性。
{
path: '/foo',
name: 'foo',
component: foo,
props: {
userName: 'From Obj'
}
}渲染后的结果：
函数模式
{
path: '/foo',
name: 'foo',
component: foo,
props: (route) => ({userName: route.query.name})
}看起来还是很清楚的，只是props会接收一个当前的路由参数，将参数中的值转换成你想要的值，以上三种模式自然也不影响通过router-view的v-bind:user-name这种方式传递，但是对于同名的参数值会有影响。
let lastProps = {};
let vBindProps = {
userName: 'vBind',
name: 'vBind'
};
let routeProps ={
userName: 'route'
};
Object.assign(lastProps,vBindProps,routeProps);
// {userName: "route", name: "vBind"}
最终的lastProps就是传入的propsVueRouter基础的更多相关文章
- Vue-Router 基础入门教程
Vue-Router 基础入门教程 前言 这周的计划是用VUE将之前的小demo的前端给重构了,并且做成前后端分离的样式,因为之前的那个聊天室的demo几乎都是在一个路由上完成的,所以学习Vue-ro ...
- Vue-router(基础)_滚动行为和history模式
一.前言 1.滚动事件 2.h5 history模式 二.主要内容 1. (1)使用前度路由,当切换到新路由时,想要页面滚动到顶部,或者是保持原先滚动的位置,就像重新加载页面那样.vue-rout ...
- [vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
- Vue-Router基础使用
作为Vue生态系统里面的一大成员,Vue-Router主要负责vue中的页面路由及其传值问题. 1.基本使用–添加路由 基本使用主要包括四个部分,页面引入.配置路由数组.实例化路由.把实例化的路由加入 ...
- vue-router 基础
安装 NPM npm install vue-router 如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能: import Vue from 'vue' import ...
- 路由vue-router基础
目录 1. 基本例子 2. 动态路由匹配 3. 嵌套路由 4. 编程式导航 5. 命名路由 6. 命名视图 7. 重定向和别名 8. 向路由组件传递props 9. HTML5 History模式 官 ...
- Vue-Router基础学习笔记
1.安装vue-router npm install vue-router yarn add vue-router 2.引入注册vue-router import Vue from 'vue' imp ...
- [vue]vue路由篇vue-router
spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html url两种传参方式 query: $route.query ...
- Vue-router的基本用法
刚学习vue不久,就接触了路由这个好东西.下面简单聊聊vue-router的基本用法. 一.路由的概念 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击 ...
随机推荐
- Mongodb索引实战
最近碰到这样的一个需求,一张酒店政策优惠表,我们要根据用户入住和离开的时间,计算一家酒店的最低价政策前10位,数据库表字段如下: 'hid':88, 酒店id 'date':20150530, 入住日 ...
- Jenkins+maven+gitlab自动化部署之docker发布sprint boot项目(七)
Jenkins发布docker应用与发布java应用配置基本一致,需要配置Dockerfile及构建的步骤,步骤如下: 1.jenkins主机构建应用为jar包 2.jenkins主机把生产的jar包 ...
- URI和URL的关系与区别
首先给大家举个例子,有一家公司的总经理,某天,给了我一张名片,上面写了他的头衔,北京XXX公司总经理 张三,还有他的办公室地址,北京市海淀区长安街35号北京XXX公司总经理办公室,那么,我以后给我的朋 ...
- 开始使用 Manjaro（添加源+字体渲染去模糊+软件安装+优化配置+常见错误）(30)
1. 添加 archlinux 镜像源 1. 步骤一 向 /etc/pacman.d/mirrorlist 中添加国内镜像地址 1.1 方法1:自动添加 1. 输入如下命令查看国内镜像源,并按质量排序 ...
- 剑指offer59：按之字形顺序打印二叉树：[[1], [3,2], [4,5,6,7]]
1 题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 2 思路和方法 先给定一个二叉树的样式: ...
- python使用ORM之如何调用多对多关系
在models.py中,我创建了两张表,他们分别是作者表和书籍表,且之间的关系是多对多. # 书 class Book(models.Model): id = models.AutoField(pri ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- 『Python基础练习题』day03
# 1. 有变量name = " aleX leNb " 完成如下操作: # 移除 name 变量对应的值两边的空格,并输出处理结果 # 判断 name 变量是否以 "a ...
- Scratch编程：画多边形（八）
“ 上节课的内容全部掌握了吗?反复练习了没有,编程最好的学习方法就是练习.练习.再练习.一定要记得多动手.多动脑筋哦~~” 01 — 游戏介绍 这节我们将实现:程序提示用户输入数据,然后根据用户的输入 ...
- spring整合MQ
---恢复内容开始--- 一. 导入依赖 <dependencies> <!-- ActiveMQ客户端完整jar包依赖 --> <dependency> < ...