Bug记载2之Vue.JS路由定义的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueRouter</title>
<script src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<template id="users">
<div>
<div>I am the users page !</div>
<hr>
<router-link to='/users/login'>Login</router-link>
<router-link to="/users/regist">Regist</router-link>
<router-view>Login and Regist areas !</router-view>
</div>
</template>
<template id="detail">
<div>
<div>I am the detail page !</div>
{{$route.params}}
<br>
{{$route.path}}
<br>
{{$route.query}}
</div>
</template>
<template id="news">
<div>
<div>I am the news page !</div>
<hr>
<router-link to="/news/detail/001">News 001</router-link>
<router-link to="/news/detail/002">News 002</router-link>
<router-view></router-view>
</div>
</template>
<template id="home">
<div>
<div>I am the main page !</div>
<br>
<input type="button" value="ToUserPage" @click="push">
<input type="button" value="ToDetailPage" @click="replace">
</div>
</template>
<script type="text/javascript">
window.onload=function(){
/*Definite component for routers*/
const home={
template:'#home',
methods:{
push(){
router.push({path:'/users'});
},
replace(){
router.replace({path:'/news/detail/005'})
}
}
};
const news={
template:'#news'
};
const users={
template:'#users'
};
const login={
template:'<div>I am the login page !</div>'
};
const regist={
template:'<div>I am the regist page !</div>'
};
const detail={
template:'#detail'
};
//Definite router
/*位置一：写在这里是就对了，也就是：
*写在const router=new VueRouter({routes});路由定义的上面，就位置而言哈，别想多了，哈哈，，
*/
const routes=[{path:'/home',component:home},
{
path:'/news',
component:news,
children:[
{path:'detail/:aid',component:detail}]
},
{
path:'/users',
component:users,
children:[
{path:'login',component:login},
{path:'regist',component:regist}]
},
{path:'/',redirect:'/home'}//default contents of show
];
const router=new VueRouter({routes});
new Vue({
el:'#app',
/*'router':router*/
router //registe router
});
/*位置二：写在这里是就玩不下去了，也就是：
*写在const router=new VueRouter({routes});路由定义的下面，我的这个小心脏啊，上看下看，左看右看，就是看不出是哪里错了，心里这个憋屈啊，至于是个什么原理我就不懂了，初学者啊，以后再回来探个究竟吧，
*/
/*const routes=[{path:'/home',component:home},
{
path:'/news',
component:news,
children:[
{path:'detail/:aid',component:detail}]
},
{
path:'/users',
component:users,
children:[
{path:'login',component:login},
{path:'regist',component:regist}]
},
{path:'/',redirect:'/home'}//default contents of show
];*/
}
</script>
</head>
<body>
<div id="app">
<!--Use router-->
<router-link to="/home">HOME</router-link>
<router-link to="/news">NEWS</router-link>
<router-link to="/users">USERS</router-link>
<router-view>This is contents</router-view>
</div>
</body>
</html>
再顺便总结下Vue中路由的几个关键点吧：
1：需要引入<script type="text/javascript" src="js/vue-router.js"></script>，都组件化开发了，Vue中是没有vue-router的，已经把它拎出来了，
2：需要指明路由存放的位置<router-view>This is contents</router-view>
3：路由的定义：const router=new VueRouter({routes});当把routes（const routes=[]）拎出去写的时候要把它写在定义语句的前面
4: 路由中用到的一些方法：$route.params()/$route.path()/$route.query()/router.push({pach:'路径'})/router.replace({pach:'路径'})/router.go(1/-1):跳转到前一页/后一页
Bug记载2之Vue.JS路由定义的位置的更多相关文章
- vue.js路由参数简单实例讲解------简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue.js路由vue-router
学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue.js路由嵌套
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- vue.js路由vue-router（一）——简单路由基础
前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- 使用vue.js路由踩到的一个坑Unknown custom element
在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...
- vue.js路由学习笔记二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- 架构师细说 NGINX 的配置及优化
最近感觉很多东西在运用到一定的程度之后,会发现原来是自己了解到的不够.一方面限于实际运用到的不多,一方面可能是因为一开始没有进行全面认识.遂这里搜集整理了一番NGINX. 一.nginx启动和关闭 c ...
- 掌握Spark机器学习库（课程目录）
第1章 初识机器学习 在本章中将带领大家概要了解什么是机器学习.机器学习在当前有哪些典型应用.机器学习的核心思想.常用的框架有哪些,该如何进行选型等相关问题. 1-1 导学 1-2 机器学习概述 1- ...
- IT实习总结-上海的实习的日子
在上海实习两个多月,从找工作,到面试,最后到创业公司工作,体会了一个人在外工作的那种工作时的压力与双休时的寂寞,有时甚至有点迷惘,可能这就是生活,每个人都会经历,在经历的过程中会有不同的味道. 说说我 ...
- swift 待研备份
https://www.ctolib.com/topics-115290.html 但是还是用到了一个叫做 The Protocol Witness Table (PWT) 的函数表 https:// ...
- Linux下 SpringBoot jar项目后台运行、查看、停用
运行java jar: nohup java -jar **-0.0.1-SNAPSHOT.jar & 查看进程: 采用top或者ps aux命令.一般 如果后台是springboot,jar ...
- JavaSE-18 常用工具类
学习要点 Object类 枚举 包装类 Math类 Random类 字符串处理 日期时间 Object类 1 什么是Object类 Object类存储在java.lang包中,是所有java类(Ob ...
- Javascript中的For循环
在开发的过程中,遍历是一个经常遇到的.而for循环则是Javascript工具箱里一个好用的,也常用的工具.每个人的习惯不同,for循环的写法也不尽相同. 1.不写声明变量的写法: for(var i ...
- 怎样提高DB2存储过程性能
高性能的SQL过程是数据库开发人员所追求的,我将不断把学到的,或在实际开发中用到的一些提高SQL过程性能的技巧整理出来,温故而知新. 1,在只使用一条语句即可做到时避免使用多条语句 让我们从一个简单的 ...
- PHP：GD库 生成验证码图片
文章来源:http://www.cnblogs.com/hello-tl/p/7592998.html <?php /** * __construct($new):构造函数创建一张图片$new- ...
- PHP 处理接口保证数据安全性
原地址:http://blog.csdn.net/lhbeggar/article/details/46377653 php做APP接口时,如何保证接口的安全性? 1.当用户登录APP时,使用http ...