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 ...
随机推荐
- No rule to make target ...
在编译一个Android上的jni的时候出现了如下的问题 make[3]: *** No rule to make target `/home/zhang/android1/src/androidpk ...
- js阻塞ui进程涉及的知识点整理
项目进行中遇到了同步ajax阻塞ui线程阻塞的问题,原因是执行两个同步ajax请求为一次完整的方法,因业务需求需要循环执行这个方法,检查后台返回的数据正确,但是由于ajax请求时间过长,考虑增加遮罩层 ...
- autofs - automounter maps的格式
描述(DESCRIPTION) automounter maps 是一系列非主映射文件或者是NIS映射(NIS maps),它们被 automounter 的主映射文件(master map)具体调用 ...
- vue工程化之公有CSS、JS文件
1.关于公共的css 在src下面新建public.css,然后在main.js中引入进来 import '@/public.css',这样所有页面中都会使用这个样式了,如果只是部分页面需要,那还是不 ...
- 00PostgreSQL
PostgreSQL PostgreSQL: The World's Most Advanced Open Source Relational Database;PostgreSQL是一个功能强大的开 ...
- vue 表单操作
<form class="mian__form" @submit.prevent="submit"> <ul> ...
- listener.log文件过大导致oracle假死
/home/u01/oracle/product/11gr2/db_1/log/diag/tnslsnr/VM_179_95_centos/listener/trace/listener.log li ...
- Bzoj 3307 雨天的尾巴（线段树合并+树上差分）
C. 雨天的尾巴 题目描述 N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成所有发放后,每个点存放最多的是哪种物品. 输入格式 第 ...
- 路径工具类NSPathUtilities
路径工具类NSPathUtilities.h 路径类NSPathUtilities.h包含了 NSString的函数和分类扩展,他允许你操作路径名.应该竟可能的使用这些函数,以便使程序更独立于文件系统 ...
- ubuntu环境安装docker
查看已安装的docker apt list docker* 如果已安装,并且需要卸载,则执行以下命令: apt remove docker* 更新apt索引 apt update apt需要支持HTT ...