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的不同返回不同的页面实现 ...
随机推荐
- mybatis的xml中也可以通过传入标记参数然后用 choose写选择语句【我】
mybatis的xml中也可以通过传入标记参数然后用 choose写选择语句
- DELPHI中 screen.Cursor:=crhourglass; adoQuery.close; adoquery.Open; screen.Cursor:=crdefault;啥意思
鼠标忙这段代码大概是用来演示鼠标的用法的.具体解释如下: 使鼠标指针为沙漏状.(以表示程序正忙)screen.Cursor:=crhourglass; 把(打开的)数据库关闭.adoQuery.clo ...
- 异地协作，A地上传jar包到B地服务器上传速率慢
在A地使用ftp服务器,再登录B地的目标服务器,使用ftp命令从ftp服务器下载文件,速度快点,下载带宽比上传带宽要大一点 https://blog.csdn.net/df0128/article/d ...
- 白嫖百度 Tesla V100 笔记（在 AI Studio 上使用 tensorflow 和 pytorch 的方法）
登陆百度 AI Studio 并按照教程创建新项目 启动项目并进入控制台 下载 Anaconda3/Miniconda3 安装脚本 安装在 ~/work/*conda3 目录 输入命令 source ...
- utf8 unicode 编码互转
static function utf8_to_unicode($c) { switch(strlen($c)) { case 1: return ord($c); case 2: $n = (ord ...
- Redis 数据类型String 使用
字符串是Redis中最基本的数据类型,它能够存储任何类型的字符串,包含二进制数据.可以用于存储邮箱,JSON化的对象,甚至是一张图片,一个字符串允许存储的最大容量为512MB.字符串是其他四种类型的基 ...
- Codis的安装配置
codis是分布式redis解决方案 centos系统下安装codis需要安装相关的依赖,将图中的依赖上传至centos系统中 依次进行安装: 一.go环境的安装配置 解压到install目录下: . ...
- Node中导入模块require和import??
转自:https://blog.csdn.net/wxl1555/article/details/80852326 S6标准发布后,module成为标准,标准的使用是以export指令导出接口,以im ...
- 阿里云RocketMQ的消费者简单实现
业务场景之类的请看另一篇生产者的实现: package com.ttt.eee; import com.aliyun.openservices.ons.api.Action; import com.a ...
- B9 Concurrent 重入锁（ReentrantLock）
[概述] java.util.concurrent.locks.ReentrantLock 实现 java.util.concurrent.locks.Lock 接口,加锁(lock)和 解锁(unl ...