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的不同返回不同的页面实现 ...
随机推荐
- Facebook libra开发者文档- 1 -welcome
参考https://developers.libra.org/docs/welcome-to-libra 欢迎来到Libra开发者网站!Libra的使命是建立一个简单的全球货币和金融基础设施,为数十亿 ...
- HTML5 地理位置定位API（5）
HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...
- 001-http-总览、文件配置、常用http client、http连接池
一.概述 http请求项目搭建:地址:https://github.com/bjlhx15/common-study.git 中的common-http 主要针对post请求中的,form表单[app ...
- Qt编写自定义控件54-时钟仪表盘
一.前言 这个控件没有太多的应用场景,主要就是练手,论美观的话比不上之前发过的一个图片时钟控件,所以此控件也是作为一个基础的绘制demo出现在Qt源码中,我们可以在Qt的安装目录下找到一个时钟控件的绘 ...
- LeetCode_66. Plus One
66. Plus One Easy Given a non-empty array of digits representing a non-negative integer, plus one to ...
- EOF使用
1.cat向文件覆盖内容 cat > local.repo << EOF [local]name=localbaseurl=file:///mnt/cdromgpgcheck=0en ...
- vs2015配置link.exe环境变量
https://www.cnblogs.com/johnwii/p/4966086.html
- html页面js响应回车
代码示例: document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.a ...
- 动态绑定easyui datagrid列名
根据实时数据在同一个DataGrid中显示不同字段,本身easyui并没有支持动态绑定列名,只有show属性显示或隐藏某字段.今天在网上看到直接修改easyui类库动态绑定列名的方法,废话不多说直接借 ...
- Andrew Ng机器学习课程14
Andrew Ng机器学习课程14 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 引言:主要介绍了当数据量不足,利用EM算法对混合高斯模型进行建模时数据量比 ...