<!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. web安全后渗透--XSS平台搭建及使用

     xss平台搭建 1.申请一个云主机来进行建站:149.28.xx.xx 2.安装lnmp: wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO ln ...

  2. 把json数据转化成对象

    把json数据转化到一个对象中,再用对象直接调用 package com.lxj.register; import java.io.BufferedReader; import java.io.IOE ...

  3. R in action读书笔记（22）第十六章 高级图形进阶（下）

    16.2.4 图形参数 在lattice图形中,lattice函数默认的图形参数包含在一个很大的列表对象中,你可通过trellis.par.get()函数来获取,并用trellis.par.set() ...

  4. VM virtualBox设置无缝全屏

    设置之前:

  5. vb 案例学习

    ' ================================================================================================== ...

  6. PHP网络协议相关考点

    HTTP状态码 HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码. HTTP状态码主要有5种,代表5种不同类型的响应: 1xx:信息性状态码,代表接 ...

  7. 整合Activiti Modeler到业务系统（或BPM平台）

    http://www.kafeitu.me/activiti/2013/03/10/integrate-activiti-modeler.html 1. 为什么要整合 Activiti 5.10版本把 ...

  8. KMP算法介绍

    简介 KMP算法是D.E.Knuth.J.H.Morris和V.R.Pratt共同提出的,称之为Knuth-Morris-Pratt算法,简称KMP算法.该算法与Brute-Force算法相比有较大改 ...

  9. 如何把datetime类型字段修改为int类型

    如何把datetime类型字段修改为int类型 我有一个表为:table1 其中有一个datetime类型的字段  a    现在我想我想把字段a的类型改为int类型 当我执行以下命令时报如下的错误a ...

  10. django 标签

    django标签 {% if/for/ifequal/ifnotequal condition %} ...{{ name|first|lower}}{# interpretation:lower t ...