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的不同返回不同的页面实现 ...
随机推荐
- 简略描述：一个 url 从输入按下回车键，到页面展示出来，都经历了什么？
首先,在输入网址按下回车以后,这个时候DNS服务器会通过当前的网址去解析网址的 ip: 在查找到真的 IP 以后,这个时候浏览器会向 web 服务器发起一个 tcp 连接请求(三次握手): 第一次:建 ...
- 清空Redis缓存
Redis缓存清理 1.访问redis根目录 cd /usr/local/redis-2.8.19 2.登录redis:redis-cli -h 127.0.0.1 -p 6379 3.查 ...
- GPU Skinning 结合 Instanced 高效实现大量单位动画
GPU Skinning 与 Instance 蒙皮动画 计算骨骼信息 蒙皮 GPU Skinning CPU Skinning 与 GPU Skinning 实现方式 Skinning 类型 优点 ...
- 最新 翔通动漫java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.翔通动漫等10家互联网公司的校招Offer,因为某些自身原因最终选择了翔通动漫.6.7月主要是做系统复习.项目复盘.Leet ...
- cocos creator 倒计时code
let countDownNode = this.viewNode.getChildByName('countDownNode').getComponent(cc.Label); countDownN ...
- Java使用icepdf转高清图片
<dependency> <groupId>org.icepdf.os</groupId> <artifactId>icepdf-core</ar ...
- Python视频教程免费分享（2020年最新版）
为期92天的全套Python视频教程免费分享,总计57G! 里面还有我的笔记,希望对大家有帮助哈~ 1-32天 … … 65-92天 百度云网盘: 链接: https://pan.baidu.com/ ...
- PCL学习（一）从PLY文件读入点云数据
#include <iostream> #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> #inclu ...
- airflow删除dag不在页面显示
当我们需要把dag删除的时候,遇到了删除了相应的dag文件,但页面还是显示 这个时候需要重启airflow 的webserver ps -ef|egrep rm -rf /home/airflow ...
- 怎么让桌面存到d盘
1.找到桌面文件夹. (C:\Users\Administrator) [C盘],[用户].[“”系统账号“(如Administrator)文件夹],[桌面] 2.打开桌面文件夹的属性. 查看位置,修 ...