<!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. 阿里云CDN服务功能介绍

  2. Webstorm 的 Tab 键调整缩进值

    两步即可,注意版本

  3. 花括号的使用 printf %${width}s , 否则会 去找 $widths

    花括号的使用  printf %${width}s , 否则会 去找  $widths 1 #! /usr/bin/perl   2 use strict;  3 use warnings;  4   ...

  4. super(Student,self).__init__()初始化的是什么东西？

    继承不是为了继承里面原来的属性和值么,不初始化的话,会有什么问题? 2015-04-04源自:python进阶 5-17642 浏览2 回答 最佳回答 2015-05-05 1 super(Stude ...

  5. jQuery任意标签锚点跳转插件

    // 任意锚点平滑跳转插件// 2010-07-15 v1.0(function($){ $.fn.zxxAnchor = function(options){ var defaults = { ie ...

  6. Hadoop-2.7.1伪分布--安装配置hbase 1.1.2

    hbase-1.1.2下载地址:http://www.eu.apache.org/dist/hbase/stable/hbase-1.1.2-bin.tar.gz 下载之后解压至\usr\local目 ...

  7. 有向图连通分量SCC

    在无向图中,如果从顶点vi到顶点vj有路径,则称vi和vj连通.如果图中任意两个顶点之间都连通,则称该图为连通图,否则,称该图为非连通图,则其中的极大连通子图称为连通分量,这里所谓的极大是指子图中包含 ...

  8. Volume 1. Sorting/Searching(uva)

    340 - Master-Mind Hints /*读了老半天才把题读懂,读懂了题输出格式没注意,结果re了两次. 题意:先给一串数字S,然后每次给出对应相同数目的的一串数字Si,然后优先统计Si和S ...

  9. 3.2.8 sed 的运作

        sed 的工作方式相当直接.命令行上的每个文件会依次打开与读取.如果没有文件,则使用标准输入,文件名“-”(单个破折号)可用于表示标准输入.       [many@avention Desk ...

  10. 【06】对AJAX的总结(转)

    对AJAX的总结   通过前面对 AJAX 的讲解,我们可以将 AJAX 请求分成以下几个步骤: 创建 XMLHttpRequest 对象: 设置事件处理函数,处理返回的数据: 初始化并发送请求. 可 ...