Vue命名路由
Vue命名路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<!-- 1.先引入vue.js -->
<script src="js/vue.js"></script>
<!-- 2.引包 引入 核心的插件vue-router -->
<script src="node_modules/vue-router/dist/vue-router.js"></script></script>
<script type="text/javascript"> // 2.让vue使用该VueRouter创建 如果vue是一个局部作用域的对象 那么必须Vue.use(VueRouter);
// Vue.use(VueRouter); //声明组件
var Login = {
template:`<h1>我是登录页面</h1>`
};
var Register = {
template:`<h1>我是注册页面</h1>`
};
// 3.创建路由对象 var router = new VueRouter({
// 4.配置路由对象
routes:[
// 路由匹配的规则
{
path:'/login',
name:'login',
component:Login
},
{
path:'/register',
name:'register',
component:Register
}
]
}); // 抛出两个全局的组件 router-link router-view var App = {
template:`
<div>
<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
<router-link :to = "{name:'login'}">登录</router-link>
<router-link :to = "{name:'register'}">注册</router-link> <!--路由组件的出口-->
<router-view></router-view>
</div>
`
} // Cannot read property 'matched' of undefined
// 5.将配置好的路由对象关联到vue实例化对象中
new Vue({
el:'#app',
router:router,
template:`<App />`,
components:{
App
}
});
</script> </body>
</html>
Vue命名路由的更多相关文章
- vue 命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. const ro ...
- [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- vue路由--命名路由
有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...
- Vue 路由的简单使用(命名路由、query路由传参、params路由传参)
1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...
- VUE进阶(路由等)
初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-dire ...
- vue（5）—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue命名视图实现经典布局
vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- VueJs(11)---vue-router（命名路由，命名视图，重定向别名，路由组件传参）
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- Vue的路由设置
一.路由基础介绍 1.什么是前端路由? 路由是根据不同的url地址展示不同的内容或页面 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务器根据url的不同返回不同的页面实现 ...
随机推荐
- ISO/IEC 9899:2011 条款5——5.2.4 环境限制
5.2.4 环境限制 1.翻译与执行环境都约束了语言翻译器和库的实现.下面概述了对一个顺应标准实现的语言相关的环境限制:库相关的限制在条款7中讨论. 5.2.4.1 翻译限制 1.实现应该能够翻译并执 ...
- zblog文件大小超出，上传成功但插入不了
在zblogphp时,经常会遇到需要上传2m以上的文件或图片,这个时候就需要修改默认上传文件的大小了.看了很多地方的文章都解决不了,后面在麒麟杰博客找到相关解决办法. 工具/原料 zblogp ...
- PAT 甲级 1050 String Subtraction (20 分) （简单送分,getline(cin,s)的使用）
1050 String Subtraction (20 分) Given two strings S1 and S2, S=S1−S2 is defined to be t ...
- LODOP打印超文本字符串拼接1 固定表格填充数值
前面的博文:Lodop打印控件传入css样式.看是否传入正确样式.Lodop打印如何隐藏table某一列,Lodop传入的样式可以不是页面本身的css样式,传入什么打印什么,此外,数据也是,超文本打印 ...
- 使用httpwebrequest Post数据到网站
怎样通过HttpWebRequest 发送 POST 请求到一个网页服务器?例如编写个程序实现自动用户登录,自动提交表单数据到网站等.假如某个页面有个如下的表单(Form): <form nam ...
- 海量无损高音质音乐文件分享180TB（持续更新）
海量无损高音质音乐文件分享180TBWAV,flac,ape格式(持续更新),由于本人是音乐发烧爱好者,收集海量的无损音乐,已经分类好了,比较方便查找,但是本地没法存储,所有放在网盘中,并且我这边还会 ...
- git 创建标签推送远程分支
目录 git 创建标签推送远程分支 查看tag 创建tag 推送标签到远程仓库 删除tag git 创建标签推送远程分支 标签概念: tag, 对于迭代频繁的项目. 每一个标签可以理解为一个版本. 创 ...
- mysql5.6版本数据库向Mysql5.7版本的数据库更新数据
timestamp 类型不允许 timestamp NOT NULL DEFAULT '0000-00-00 00:00:00', 创建表的是后会报异常,解决方法是: 在my.cnf文件里面假如: s ...
- JRE和JDK的作用和区别
JVM(Java Virtual Machine)是一个虚拟的用于执行bytecode字节码的“虚拟计算机”JRE(Java Runtime Environment):Java 虚拟机.库函数 ...
- springboot集成elk 二：springboot + elk 采集日志
到logstash-2.0.0\bin下新建文件 logstash.conf input { tcp { mode => "server" host => " ...