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 ...
随机推荐
- linux下svn安装(ALI ECS)
yum安装svn 搭建和使用SVN 可参考阿里云文档:https://help.aliyun.com/document_detail/52864.html?spm=5176.8208715.110.1 ...
- window下phpstudy开启redis扩展
注:一定要注意自己PHP的版本结构是64还是32位的!其次查看PHP Extension Build是NTS or TS! 1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本(特 ...
- [Android]如何实现无限滚动的ListViw/GridView(翻译)
ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...
- Node.js——render封装
封装 挂在到res上
- linux crontab创建计划任务
1.编辑计划任务 编辑crontab文件 crontab -e 2.查看计划任务日志 查看crontab日志 tail -100f /var/log/cron 3.创建计划任务格式 (1)基本格式 : ...
- 火狐加载用户配置文件 "C:\XXX\Mozilla Firefox\firefox.exe" http://192.168.1.1:8080 -profile ../kkk
"C:\XXX\Mozilla Firefox\firefox.exe" http://192.168.1.1:8080 -profile ../kkk $("#clic ...
- 设置npm taobao源和使用cnpm的不同
一开始,我直接把npm的源设置为taobao源. 使用中,没发现有什么问题,直到,我要装vue-devtools的时候,出问题了. 在使用,,npm i 时,到下载cypress时,怎么都下载不下来. ...
- mitmproxy 数据抓包
1.安装环境: 基于python windows操作系统需要安装Microsoft Visual C++ V14.0以上 linux操作系统则直接基于python安装即可 2.安装mitmproxy ...
- 珂朵莉树(Chtholly Tree)学习笔记
珂朵莉树(Chtholly Tree)学习笔记 珂朵莉树原理 其原理在于运用一颗树(set,treap,splay......)其中要求所有元素有序,并且支持基本的操作(删除,添加,查找......) ...
- linux如何正确设置静态ip
如果是新安装的CentOS7的用户,刚开始应该是没网的,ifconfig命令在CentOS7已经被淘汰了. 1.使用ip addr 即查看分配网卡情况. 2.激活网卡 [root@localhost ...