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 ...
随机推荐
- Fragment懒加载预加载
1. 预加载viewpager.setOffscreenPageLimit(2);,默认是预加载1,可以结合懒加载使用. 如果希望进入viewpager,Fragment只加载一次,再次滑动不需加载( ...
- R in action读书笔记（11）-第八章：回归-- 选择“最佳”的回归模型
8.6 选择“最佳”的回归模型 8.6.1 模型比较 用基础安装中的anova()函数可以比较两个嵌套模型的拟合优度.所谓嵌套模型,即它的一 些项完全包含在另一个模型中 用anova()函数比较 &g ...
- axis2与eclipse的整合：开始一个简单的axis2 的demo
1.下载axis2,现在axis2最新版本是axis2-1.6.2,下载地址:http://axis.apache.org/axis2/java/core/download.cgi 2.下载好的zip ...
- iOS-UI控件之UITableView（一）
UITableView 介绍 UITableView 是用来用列表的形式显示数据的UI控件 举例 QQ好友列表 通讯录 iPhone设置列表 tableView 常见属性 // 设置每一行cell的高 ...
- InChatter系统之服务端的Windows服务寄宿方式（三）
为了部署的方便,我们开发Windows服务的服务寄宿程序,这样我们的服务便可以作为系统服务,随着系统的启动和关闭而启动和关闭,而避免了其他的设置,同时在服务的终止时(如系统关闭等)能及时处理服务的关闭 ...
- 更改ligerui源码实现分页样式修改
修改后样式: 第一步:实现功能. 更改源码部分ligerui.all.js文件 读源代码,发现ligerui底部工具条是这样实现的(ps:注释部分为源码) _render: function () { ...
- vue-cropper
项目中用到了vue-cropper插件,让我觉得很好用附上两个地址 vue-cropper在git上的地址 https://github.com/xyxiao001/vue-cropper 针对vue ...
- Activiti数据库表结构(表详细版)
http://blog.csdn.net/hj7jay/article/details/51302829 1 Activiti数据库表结构 1.1 数据库表名说明 Activiti工作流总 ...
- patest_1007_Maximum Subsequence Sum_(dp)(思维)
1007. Maximum Subsequence Sum (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...
- 进程的互斥运行：CreateMutex函数实现只运行一个程序实例
HANDLE hMutex=CreateMutex(NULL,TRUE,"HDZBUkeyDoctorTool"); if(hMutex) { if(ERROR_ALREADY_E ...