<!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. 第二章 TCP/IP 基础知识

    第二章 TCP/IP 基础知识   TCP/IP  transmission control protocol and ip internet protocol 是互联网众多通信协议中最为著名的.   ...

  2. 'NSUnknownKeyException' … setValue:forUndefinedKey:]: …not key value coding compliant

    解决一个问题: 当我添加一个IBout, 报了如下错误 NSUnknownKeyException' … setValue:forUndefinedKey:]: …not key value codi ...

  3. iOS-UI控件之UITableView（四）- cell数据刷新

    TableView- 数据刷新 数据刷新 添加数据 删除数据 更改数据 全局刷新方法(最常用) [self.tableView reloadData]; // 屏幕上的所有可视的cell都会刷新一遍 ...

  4. 微信小程序中的图形验证码

    可以在utils中新建一个mcaptcha.js 代码如下: module.exports = class Mcaptcha { constructor(options) { this.options ...

  5. leetcode_919. Complete Binary Tree Inserter

    https://leetcode.com/problems/complete-binary-tree-inserter/ 设计一个CBTInserter,使用给定完全二叉树初始化.三个功能; CBTI ...

  6. 自动化测试selenium + request + 动态加载页面

    # demo01from selenium import webdriver from time import sleep bro = webdriver.Chrome(executable_path ...

  7. vim 将文件所有行合并到一行

      vim 将文件所有行合并到一行   在 Normal Mode下执行: ggvGJ gg 用于跳到行首 v 转换成 visual 模式 G 跳到最后一行 J 合并行

  8. Python之__class__.__module__，__class__.__name__

  9. Google Chrome浏览器调试

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  10. html嵌入pdf && html嵌入多媒体文件，word,flash,pdf,音视频

    <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="1000" hei ...