Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装
1.1 Vue Router简介
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,构建单页面应用。
Vue Router支持3种路由模式:
◊ hash:使用URL hash值作为路由,HTML5 History API出现之前,前端路由都通过hash来实现。hash实现需要在URL中加上#,Web服务不会解析hash,自动忽略#后面的内容,JavaScript通过window.location.hash读取解析。
◊ history:依赖HTML5 History API和服务器配置
◊ abstract:支持所有JavaScript运行环境,如node服务器端。如果发现没有浏览器的API,路由就会强制进入该模式。
vue-router提供两个指令标签组件来处理这个导航与自动渲染逻辑:
◊ <router-view>:渲染路径匹配到的组件视图
◊ <router-link>:支持用户在具有路由功能的应用中导航
1.2 Vue Router安装
Vue Router官方网址:https://github.com/vuejs/vue-router
Vue Router文档教程:https://router.vuejs.org/zh/
npm安装VueRouter:
npm install vue-router
2. 起步示例
2.1 单个html页面中使用
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>libing.vue</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vue-router/dist/vue-router.min.js"></script>
</head> <body>
<div id="app">
<ul>
<li>
<router-link to="/home">Home</router-link>
</li>
<li>
<router-link to="/about">About</router-link>
</li>
</ul>
<router-view></router-view>
</div> <template id="home">
<div>Home</div>
</template>
<template id="about">
<div>About</div>
</template> <script>
var home = Vue.extend({
template: "#home"
});
var about = Vue.extend({
template: "#about"
}); const routes = [{
path: '/home',
component: home
},{
path: '/about',
component: about
}
]; const router = new VueRouter({
routes: routes
}); const app = new Vue({
router
}).$mount('#app');
</script>
</body> </html>
Index.html
2.2 vue-cli中模块化使用
(1)创建基于vue-cli项目
$ vue init webpack libing.vue
(2)/src/views中新建Home.vue及About.vue
<template>
<div>{{ title }}</div>
</template> <script>
export default {
data: function() {
return {
title: "主页"
};
}
};
</script>
Home.vue
<template>
<div>{{ title }}</div>
</template> <script>
export default {
data: function() {
return {
title: "关于"
};
}
};
</script>
About.vue
(3)/src/route/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About' Vue.use(Router) export default new Router({
routes: [{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
(4)/src/App.vue
<template>
<div id="app">
<ul>
<li>
<router-link to="/home">Home</router-link>
</li>
<li>
<router-link to="/about">About</router-link>
</li>
</ul>
<router-view/>
</div>
</template> <script>
export default {
name: "App"
};
</script>
在router-link通过名称引用路由:向to属性传入一个对象显式的声明路由的名称。
<router-link :to="{ name: 'home' }">Home</router-link>
注:在/src/route/index.js中配置路由路径时,创建Router 对象new Router({}),如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头。
设置 mode: "history"
将使用 HTML5 history 模式,该模式下没有 # 前缀,而且可以使用 pushState 和 replaceState 来管理记录。
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About' Vue.use(Router) export default new Router({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
3. 动态路由匹配
在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) ,动态部分 以 : 开头。
/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About'
import User from '@/views/User' Vue.use(Router) export default new Router({
mode: 'history',
routes: [{
path: '/',
component: Home
},
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
{
// 动态路径参数 以冒号开头
path: '/user/:id',
component: User
}
]
})
User.vue:
<template>
<div>User ID:{{ $route.params.id }}</div>
</template>
<template>
<div>User ID:{{ id }}</div>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id
};
}
};
</script>
App.vue:
<template>
<div id="app">
<ul>
<li>
<router-link to="/home">Home</router-link>
</li>
<li>
<router-link to="/about">About</router-link>
</li>
<li>
<router-link to="/user/1">User ID:1</router-link>
</li>
<li>
<router-link to="/user/2">User ID:2</router-link>
</li>
</ul>
<router-view/>
</div>
</template> <script>
export default {
name: "App"
};
</script>
在User.vue中直接通过 {{ $route.params.id }} 获取路由中路径参数值。
当整个vue-router 注入到根实例后,在组件的内部,可以通过this.$route 来获取到 router 实例。
$route中params 属性来获得动态部分,params 属性是一个对象。
属性名是路径中定义的动态部分 id, 属性值是router-link中to 属性中的动态部分。
在<router-link>中加入一个params的属性来指定具体的参数值。
<router-link :to="{ name: 'user', params:{ id: 1 }}">UserID:1</router-link>
4. 嵌套路由
实际应用界面,通常由多层嵌套的组件组合而成。
vue-router配置嵌套路示例:
App.vue
<template>
<div id="app">
<ul>
<li>
<router-link to="/home">Home</router-link>
</li>
<li>
<router-link :to="{ name: 'about' }">About</router-link>
</li>
<li>
<router-link :to="{ name: 'user', params:{ id: 1 }}">UserID:1</router-link>
</li>
<li>
<router-link to="/user/2">UserID:2</router-link>
</li>
</ul>
<router-view/>
</div>
</template> <script>
export default {
name: "App"
};
</script>
这里的<router-view>是最顶层的出口,渲染最高级路由匹配到的组件。
一个被渲染组件同样可以包含自己的嵌套 <router-view>。
User.vue
<template>
<div>
<h2>User ID:{{ $route.params.id }}</h2>
<router-view></router-view>
</div>
</template> <script>
export default {};
</script>
要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置:
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About'
import User from '@/views/User'
import UserProfile from '@/views/UserProfile' Vue.use(Router) export default new Router({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
// 动态路径参数 以冒号开头
path: '/user/:id',
name: 'user',
component: User,
children: [{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
name: 'profile',
component: UserProfile
}]
}
]
})
UserProfile.vue
<template>
<div>User Profile</div>
</template> <script>
export default {};
</script>
访问嵌套路由方式:http://localhost:8080/user/1/profile
在嵌套路由中访问父级路由参数:
<template>
<div>User Profile:{{ $route.params.id }}</div>
</template> <script>
export default {};
</script>
当访问 /user/1 时,提供一个 空的子路由。
{
// 动态路径参数 以冒号开头
path: '/user/:id',
name: 'user',
component: User,
children: [{
// 当 /user/:id 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: '',
component: UserProfile
}, {
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
name: 'profile',
component: UserProfile
}]
}
5. 命名视图
若要同级展示多个视图(非嵌套),使用命名视图。
如果router-view没有设置名字,则默认为 default。
<router-view name="main"></router-view>
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。使用 components 配置。
<router-view name="header"></router-view>
<router-view name="slidebar"></router-view>
<router-view name="main"></router-view>
<router-view name="footer"></router-view>
Route配置:
export default new Router({
routes: [{
path: '/',
name: 'home',
components: {
default: Home,
header: Header,
slidebar: SlideBar,
footer: Footer
}
}
]
})
命名嵌套视图:
<template>
<div>
<h2>User ID:{{ $route.params.id }}</h2>
<router-view></router-view>
<router-view name="defined"></router-view>
</div>
</template> <script>
export default {};
</script>
export default new Router({
routes: [{
// 动态路径参数 以冒号开头
path: '/user/:id',
name: 'user',
component: User,
children: [{
// 当 /user/:id 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: '',
component: UserProfile
}, {
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
name: 'profile',
components: {
default: UserProfile,
defined: UserDefinedProfile
}
}]
}
]
})
6. 编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接,还可以借助 router 的实例方法,通过编写代码来实现。
<template>
<div>
<input type="button" value="跳转" @click="handleRedirect" />
</div>
</template>
<script>
export default {
methods: {
handleRedirect() {
this.$router.push({ path: "/" });
this.$router.push({ name: 'about'})
this.$router.push({ name: 'user', params: { id: 1 }})
}
}
};
</script>
7. 导航守卫
7.1 全局前置守卫
使用 router.beforeEach 注册一个全局前置守卫:
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => {
// ...
})
示例:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('../views/About.vue')
}
] const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
}) // 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆。
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
let token = localStorage.getItem('Token');
if (token === 'null' || token === '') {
next('/login');
} else {
next();
}
}
}) export default router
Vue.js 2.x笔记:路由Vue Router(6)的更多相关文章
- Vue.js高效前端开发 • 【Vue组件】
全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...
- vue.js应用开发笔记
看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...
- Vue.js 相关知识(路由)
1. 简介 路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤 安装vue-router或者直接引入v ...
- Vue.js随笔二(新建路由+component+添加样式+变量的显示)
创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- Vue.js 的几点总结Watchers/router key/render
Vue.js 的几点总结,下面就是实战案例,一起来看一下. 第一招:化繁为简的Watchers 场景还原: 1 2 3 4 5 6 7 8 created(){ this.fetchPostLis ...
- Vue.js实战学习笔记(中)
1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 从零开始学习Vue.js,学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
随机推荐
- 关于px,分辨率,ppi的辨析
概述 在本篇文章的开始,我先为大家解释一下这三个名词的概念. px全称为pixel--像素.pc及移动设备的屏幕就是通过往像素矩阵中填充颜色,从而在宏观上体现出图像.像素越小,图像越清晰. 分辨 ...
- cocos creator主程入门教程(六)—— 消息分发
五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 本篇开始介绍游戏业务架构相关的内容.在游戏业务层,所有需要隔离的系统和模块间通信都可以通过消息分发解耦. ...
- 利用 Blob 处理 node 层返回的二进制文件流字符串并下载文件
博客地址:https://ainyi.com/65 解释 | 背景 看到标题有点懵逼,哈哈,实际上是后端将文件处理成二进制流,返回到前端,前端处理这个二进制字符串,输出文件或下载 最近公司有个需求是用 ...
- ado.net的简单数据库操作(三)——简单增删改查的实际应用
果然,在犯困的时候就该写写博客,写博客就不困了,哈哈! 上篇我记录了自己的SqlHelper的开发过程,今天记录一下如何使用这个sqlhelper书写一个具有简单增删改查的小实例啦. 实例描述:在数据 ...
- 【网摘】C#.NET 在 MVC 中动态绑定下拉菜单的方法
1. 已知下拉菜单列表项: 在 Controller 控制器类中输入已下代码 1 public class DemoController : Controller 2 { 3 public ...
- wkhtmltox实现网页转换成图片或pdf
1.先下载http://download.gna.org/wkhtmltopdf/obsolete/windows/wkhtmltox-0.11.0_rc1-installer.exe,安装 2.在命 ...
- centos7 ipaddr 无法查看虚拟机IP解决办法
原因是: CentOS 7 默认是不启动网卡的 解决办法:https://blog.csdn.net/wxx729418277/article/details/79130649
- PHP信号管理
PHP信号管理 SIGHUP 终止进程 终端线路挂断 SIGINT 终止进程 中断进程 SIGQUIT 建立CORE文件终止进程,并且生成core文件 SIG ...
- nginx系列6:nginx的进程结构
nginx的进程结构 如下图: 通过ps –ef | grep nginx可以看到共有三个进程,一个master进程,两个worker进程. nginx是多进程结构,多进程结构设计是为了保证nginx ...
- MySQL分组查询与连接查询
一,分组查询 使用ORDER BY子句将表中的数据分成若干组(还是按行显示) 语法: SELECT 字段名[,聚集函数] FROM 表名 [WHERE子句] GROUP BY 要分组的字段名 [ORD ...