<!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路由定义的位置的更多相关文章

  1. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  2. Vue.js路由

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  3. vue.js路由vue-router

    学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...

  4. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  5. vue.js路由嵌套

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  6. vue.js路由vue-router（一）——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  7. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  8. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  9. vue.js路由学习笔记二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. 契约式设计（DbC）感想（一）

    契约式设计可以理解为正则编程的一种实践: 如果用我的三脚猫能力将这种实践方法形式化的话,大致如下(如有不正确处,请不吝指正): 1.对于方法Method的precondition & post ...

  2. vue2.0 路由知识一(路由的创建的全过程)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. AIX RAC 安装失败完全卸载

    1,删除软件安装目录 rm -rf /u01/app 2,删除以下目录内容 rm -rf/tmp/.oracle rm -rf/tmp/* rm -rf/tmp/ora* rm -rf/var/tmp ...

  4. druid监控及慢sql记录

    本文提要 前文也提到过druid不仅仅是一个连接池技术,因此在将整合druid到项目中后,这一篇文章将去介绍druid的其他特性和功能,作为一个辅助工具帮助提升项目的性能,本文的重点就是两个字:监控. ...

  5. Java SE、Java EE、Java ME 三者区别

    现在一个个来分析 1. Java SE(Java Platform,Standard Edition).Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 ...

  6. 安装Subversion1.82（SVN）

    安装Subversion1.82(SVN)插件 简介    :SVN是团队开发的代码管理工具,它使我们得以进行多人在同一平台之下的团队开发. 解决问题:Eclipse下的的SVN插件安装. 学到    ...

  7. ie兼容的解决办法，6，7、8、9、10

    在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> ...

  8. 笔试算法题（50）：简介 - 广度优先 & 深度优先 & 最小生成树算法

    广度优先搜索&深度优先搜索(Breadth First Search & Depth First Search) BFS优缺点: 同一层的所有节点都会加入队列,所以耗用大量空间: 仅能 ...

  9. Python 字符编码-文件处理

    .read #读取所有内容,光标移动到文件末尾.readable #判断文件是否可读.readline #读取一行内容,光标移动到第二行首部.readlines #读取每一行内容,存放于列表中.wri ...

  10. 每日命令：（12）sar

    sar(System Activity Reporter系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告, 包括:文件的读写情况.系统调用的使用 ...