<!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. 忘记dba用户密码，利用SQLPlus重置dba密码

    打开SQL Plus 输入用户名: sys as sysdba 输入口令:可直接回车 连接到: Oracle Database 11g Enterprise Edition Release 11.2. ...

  2. 【转】nABC法-产品分析思路

    Needs:需求N1,用户最基本需求是什么?N2,市场有多大?N3,行业链如何构成?N4,行业发展趋势如何?N5,扩充的需求有哪些? Approach:解决方案A1,解决方案如何构成?A2,需求优先级 ...

  3. WPF学习- 新建项目后自定义Main()[Type 'App' already defines a member called 'Main' with the same parameter types]

    问题点: 在App.xaml.cs中自己添加Main方法,编译会出现如下报错: 错误 CS0111 类型“App”已定义了一个名为“Main”的具有相同参数类型的成员  错误 Type 'App' a ...

  4. CAD使用GetxDataString读数据（com接口）

    主要用到函数说明: MxDrawEntity::GetxDataString2 读取一个字符扩展数据,详细说明如下: 参数 说明 [in] LONG lItem 该值所在位置 [out, retval ...

  5. ios远程推送和python版push server相关笔记

    今天研究了下ios的远程推送,网上的相关教程很多,做了一遍下来记录一下遇到的问题和注意事项(转载请注明) 1.证书及乱七八糟的配置 公钥:app id管理那儿的“Development Push SS ...

  6. JavaSE-05 数组

    学习要点 数组的基本用法 数组的典型应用 数组相关概念 问题 Java考试结束后,老师给小强分配了一项任务,让他计算全班(30人)的平均分,按照目前的知识结构,如何实现? 问题分析 数组 定义:数组是 ...

  7. snowflake机器标识自动绑定

    首先附上snowflake源码 package com.yunyihenkey.common.idworker; /** * Twitter_Snowflake<br> * SnowFla ...

  8. hdfs的特性、命令、安全模式、基准测试

    1.第一点:如何理解hdfs分布式文件系统,每台机器出一块磁盘,凑成一个大的硬盘,大的硬盘的容量来自各个服务器的硬盘容量之和. 你出5毛,我出5毛,大家凑成1块. 2. HDFS 是 Hadoop D ...

  9. JAVA基础——内存流

    掌握内存操作流 输入和输出都是从文件中来的,当然,也可将输出的位置设置在内存上,这就需要ByteArrayInputStream和ByteArrayOutputStream ByteArrayInpu ...

  10. c++ 回调的实现

    什么是回调?通常发生在需要两个角色即调用者与实现者的情形上,即我们希望当产生某个事件时,调用实现者定义的某个函数.当然这个概念很大,不是说操作系统的信号量,条件变量什么的,是在语言级别实现,如一个Fr ...