第七章 路由 70 路由-vue-router的基本使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 安装 vue-router 路由模块 -->
<script src="../lib/vue-router-3.0.6.js"></script>
</head> <body>
<div id="app">
<a href="#/login">登录</a>
<a href="#/register">注册</a> <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view中去 -->
<!-- 所以：我们可以把router-view 认为是一个占位符 -->
<router-view></router-view>
</div> <script>
//组件的模板对象
var login={
template:'<h1>登录组件</h1>'
} var register={
template:'<h1>注册组件</h1>'
} /*Vue.component('login',{
template: '<h1>登录组件</h1>'
})*/ //2.创建一个路由对象，当导入vue-router 包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
//在 new 路由对象的时候，可以为 构造函数，传递一个配合对象
var routerObj=new VueRouter({
//route //这个配置对象中的route表示 【路由匹配规则】 的意思
routes:[//路由匹配规则
//每个路由规则，则都是一个对象，这个规则对象，身上，有两个必须的属性：
// 属性1 是path, 表示监听 哪个路由链接地址；
// 属性2 是component,表示，如果 路由是前面匹配到的path，则展示component属性对应的哪个组件
//注意：component 的属性值，必须是一个组件的模板对象，不能是 组件的引用名称；
{path:'/login',component:login},
{path:'/register',component:register}
]
}) //创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
msg:''
},
methods:{},
router:routerObj //将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
});
</script>
</body>
</html>
第七章 路由 70 路由-vue-router的基本使用的更多相关文章
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- vue路由登录拦截(vue router登录权限控制)
实现原理: 哪些路由需要验证需要在路由文件router/index.js中指定: { path: '/', component: Home, name: 'Home', iconCls: 'fa fa ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- 06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
- Vue躬行记（8）——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- Vue Router 路由守卫：完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
随机推荐
- mysql 插入数据后返回自增 ID 的七种方法
参考地址:https://blog.csdn.net/qq_30715329/article/details/80868411 其中使用函数方式.存储过程方式.注解方式.xml属性方式设置都可. 常用 ...
- python 爬虫 基于requests模块发起ajax的post请求
基于requests模块发起ajax的post请求 需求:爬取肯德基餐厅查询http://www.kfc.com.cn/kfccda/index.aspx中指定某个城市地点的餐厅数据 点击肯德基餐厅查 ...
- python中的FQA （python 学习篇 1）
Q:1. " if __name__=='__main__' " 这句是什么意思,可以不加吗? A: 如果单独运行该文件,则该模块的内容会被执行: 若运行的文件引用该 ...
- React生命周期使用
组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMoun ...
- GitHub 将源代码保存在北极洞穴，至少使用 1000 年！
最近,GitHub分享了开放Arctic Code Vault的计划,该计划旨在存储和保存Flutter和TensorFlow等开源软件. 所有开放源代码项目的代码都将存储在胶片上,该胶片每帧包含88 ...
- linux常用国内的免费源及其各别的配置方法.阿里源,epel源,搜狐网易等等..
国内的一些开源的平台收集的源,确实给我们提供了很多便利,所以我就稍微收集整理了一些常用的源和网址,我也不确定能用到什么时候!欢迎评论区留言! 搜狐开源镜像站 http://mirrors.sohu.c ...
- python函数篇0-1
创建类和对象 面向对象编程是一种编程方式,此编程方式的落地需要使用 “类” 和 “对象” 来实现,所以,面向对象编程其实就是对 “类” 和 “对象” 的使用. 类就是一个模板,模板里可以包含多个函数, ...
- Spring 的 Bean 管理（XML 方式）
Spring 的 Bean 管理(XML 方式) 1. 三种实例化 Bean 的方式 使用类构造器实例化(默认无参数) 使用静态工厂方法实例化(简单工厂模式) 使用实例工厂方法实例化(工厂方法模式) ...
- Scala学习七——包和引入
一.本章要点 包也可也可以像内部类那样嵌套 包路径不是绝对路径 包声明链x.y.z并不自动将中间包x和x.y变成可见 位于文件顶部不带花括号的包声明在整个文件范围内有效 包对象可以持有函数和变量 引入 ...
- JS downLoad
$.fileDownload(url, { httpMethod: 'GET', data: null, prepareCallback: function (url) { layer.msg(&qu ...