Vue router 的使用--初级
在说 VueRouter 之前，首先要弄明白vueRouter 是干什么的，有什么用
说出来其实很简单，就是一个模板替换的问题，当路由改变的时候，把和路由相关的模板显示出来，就是这么简单。但是，当我们不知道为什么的时候，即使瞎猫碰到死耗子做出来了，也不知道是怎么回事，下次仍然是不会，我想，我们应该要有追根究底的精神
1. 首先，写html ,因为不论是替换与否，我们都是通过html来执行的，定义要替换的
2. 写替换模板
3.注册vue对象，及替换要修改的变量即data
4.定义路由的映射关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<!-- 书写链接按钮，也就是a标签 -->
<a v-link="{path:'/home'}">Home</a>
<a v-link="{path:'/about'}">About</a>
</div>
<!-- 要使用路由替换的地方 ，先整出一个框框出来-->
<router-view></router-view>
</div>
<!-- 模板替换的内容1 -->
<template id="home">
<div>
<h3 class="a">Home page</h3>
<p>{{content}}</p>
</div>
</template>
<!-- 模板替换的内容2 -->
<template id="about">
<div>
<h3 class="a">About page</h3>
<p>{{content}}</p>
</div>
</template> <script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: 'this is home page!'
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: 'this is about page!'
}
}
});
// 创建路由
var router = new VueRouter();
// 构造路由映射关系
router.map({
'/home': { // 这里和 a链接里的地址属性对应
component: Home,
},
'/about': { // 这里和 a链接的地址属性对应
component: About,
}
});
// 路由重定向，当路由为'/'时，自动映射到'/home'页面
router.redirect({
'/': '/home', // 当链接伪‘/’时，把它重定向为到 ‘/home’的链接
});
var app = Vue.extend({});
// 开启路由功能
router.start(app, "#app");
</script>
</body>
</html>
2. 在路由上加入bootstrap 排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="well well-lg">第一个路由应用</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="" v-link="{path:'/home'}">home</a>
</li>
<li>
<a href="" v-link="{path:'/about'}">about</a>
</li>
</ul>
</div>
<div class="col-md-9">
<router-view></router-view>
</div>
</div>
</div>
<template id="home">
<div>
<h3>homepage</h3>
<p>{{content}}</p>
</div>
</template>
<template id="about">
<div>
<h3>aboutpage</h3>
<p>{{content}}</p>
</div>
</template>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: "huanying2015,这里是主页内容"
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: "huanying2015,这里是相关内容，就是其他相关内容"
}
}
});
var router = new VueRouter();
router.map({
'/home': {
component: Home,
},
'/about': {
component: About,
}
});
router.redirect({
'/': '/home'
});
var App = Vue.extend({});
router.start(App, "#app");
</script>
</body>
</html>
3. 模板嵌套：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="well well-lg">第一个路由应用</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="" v-link="{path:'/home'}">首页</a></li>
<li>
<a href="" v-link="{path:'/about'}">关于我们</a>
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<router-view></router-view>
</div>
</div>
<template id="home">
<div>
<h3>首页</h3>
<p>{{content}}</p>
</div>
<div>
<ul class="nav nav-tabs">
<li>
<a href="" v-link="{path:'/home/news'}">新闻</a>
</li>
<li>
<a href="" v-link="{path:'/home/video'}">视频</a>
</li>
</ul>
</div>
<router-view></router-view>
</template>
<template id="about">
<div>
<h3>关于我们</h3>
<p >{{content}}</p>
</div>
</template>
<template id="news">
<div>
<li>倒计时1天｜CCTC 2017最全参会指南</li>
<li>200分钟QA交流，14个互联网应用架构和大数据技术案例在等你</li>
<li>自己动手扩展分布式调用链</li>
<li>分布式系统下的纠删码技术之Erasure Code</li>
</div>
</template>
<template id="video">
<div>
<li>Microsoft发布.NET架构指南草案</li>
<li>详解Android中的SQLite数据库存储</li>
<li>携程实时用户行为系统实践</li>
<li>带着问题学 Machine Learning：什么是机器学</li>
</div>
</template>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: "huanying2015,这里是首页"
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: "huanying2015,这里是关于我们的内容"
}
}
});
var News = Vue.extend({
template: "#news",
});
var Video = Vue.extend({
template: "#video"
});
var router = new VueRouter();
router.map({
'/home': {
component: Home,
subRoutes: {
'/news': {
component: News,
},
'/video': {
component: Video
} }
},
'/about': {
component: About,
subRoutes: { }
}
});
router.redirect({
'/': '/home',
'/home': '/home/news'
});
var App = Vue.extend({});
router.start(App, "#app");
</script>
</body>
</html>
4. VueRouter 参数应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="well well-lg">第一个路由应用</div>
<div class="col-md-3">
<ul class="nav nva-pills nav-stacked">
<li>
<a href="" v-link="{path:'/home'}">首页</a>
</li>
<li>
<a href="" v-link="{path:'/about'}">关于我们</a>
</li>
</ul>
</div>
<div class="col-md-9">
<router-view></router-view>
</div>
</div>
</div>
<template id="home">
<div>
<h3>首页</h3>
<p >{{content}}</p>
</div>
<div class="a">
<ul class="nav nav-tabs">
<li><a href="" v-link="{path:'/home/news'}">新闻</a></li>
<li><a href="" v-link="{path:'/home/video'}">视屏</a></li>
</ul>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="about">
<div>
<h3>关于我们</h3>
<p>{{content}}</p>
</div>
</template> <template id="news">
<ul>
<li><a v-link="{path: '/home/news/detail/01'}">倒计时1天｜CCTC 2017最全参会指南</a></li>
<li><a v-link="{path: '/home/news/detail/02'}">200分钟QA交流，14个互联网应用架构和大数据技术案例在等你</a></li>
<li><a v-link="{path: '/home/news/detail/03'}">自己动手扩展分布式调用链</a></li>
<li><a v-link="{path: '/home/news/detail/04'}">分布式系统下的纠删码技术之Erasure Code</a></li>
</ul>
<router-view></router-view>
</template>
<template id="video">
<ul>
<li>Microsoft发布.NET架构指南草案</li>
<li>详解Android中的SQLite数据库存储</li>
<li>携程实时用户行为系统实践</li>
<li>带着问题学 Machine Learning：什么是机器学</li>
</ul>
</template>
<template id="detail">
<div>
<p>新闻详情: {{$route.params.id}}</p>
<p>当前路径：{{$route.path}}</p>
<p>当前参数：{{$route.params | json}}</p>
<p>路由名称：{{$route.name}}</p>
<p>路由查询参数：{{$route.query | json}}</p>
<p>路由匹配项：{{$route.matched | json}}</p>
</div>
</template>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: 'huanying2015,这里是主页页面'
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: 'huanying2015,这里是关于相关也的页面'
}
}
});
var News = Vue.extend({
template: "#news"
});
var Video = Vue.extend({
template: "#video"
});
var Detail = Vue.extend({
template: '#detail'
});
var router = new VueRouter();
router.map({
'/home': {
name: 'home',
component: Home,
subRoutes: {
'/news': {
name: 'news',
component: News,
subRoutes: {
'/detail/:id': {
name: 'detail',
component: Detail
}
}
},
'/video': {
component: Video
}
}
},
'/about': {
component: About
}
});
router.redirect({
'/': '/home',
'/home': '/home/news'
});
var App = Vue.extend({});
router.start(App, '#app');
</script>
</body>
</html>
5. a链接选中状态：在a链接里加入：activeClass:'active'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<title>Document</title>
</head> <body>
<div id="app" class="container">
<div class="row">
<div class="well well-lg">第一个路由应用</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="#" v-link="{path : '/home', activeClass : 'active'}">首页</a></li>
<li><a href="#" v-link="{path : '/about', activeClass : 'active'}">关于我们</a></li>
</ul>
</div>
<div class="col-md-9">
<router-view></router-view>
</div>
</div>
</div>
<template id="home">
<div>
<h3>首页</h3>
<p>{{content}}</p>
</div>
<div>
<ul class="nav nav-tabs">
<li><a v-link="{path : '/home/news', activeClass : 'active'}" href="#">新闻</a></li>
<li><a v-link="{path : '/home/video', activeClass : 'active'}" href="#">视频</a></li>
</ul>
</div>
<router-view></router-view>
</template>
<template id="about">
<div>
<h3>关于我们</h3>
<p>{{content}}</p>
</div>
</template> <template id="news">
<ul class="nav nav-pills nav-stacked">
<li><a v-link="{path: '/home/news/detail/01', activeClass : 'active'}">倒计时1天｜CCTC 2017最全参会指南</a></li>
<li><a v-link="{path: '/home/news/detail/02', activeClass : 'active'}">200分钟QA交流，14个互联网应用架构和大数据技术案例在等你</a></li>
<li><a v-link="{path: '/home/news/detail/03', activeClass : 'active'}">自己动手扩展分布式调用链</a></li>
<li><a v-link="{path: '/home/news/detail/04', activeClass : 'active'}">分布式系统下的纠删码技术之Erasure Code</a></li>
</ul>
<router-view></router-view>
</template> <template id="video">
<ul>
<li>Microsoft发布.NET架构指南草案</li>
<li>详解Android中的SQLite数据库存储</li>
<li>携程实时用户行为系统实践</li>
<li>带着问题学 Machine Learning：什么是机器学</li>
</ul>
</template>
<template id="detail">
<div>
<p>新闻详情: {{$route.params.id}}</p>
<p>当前路径：{{$route.path}}</p>
<p>当前参数：{{$route.params | json}}</p>
<p>路由名称：{{$route.name}}</p>
<p>路由查询参数：{{$route.query | json}}</p>
<p>路由匹配项：{{$route.matched | json}}</p>
</div>
</template>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
content: 'huanying2015,这里是主页页面'
}
}
});
var About = Vue.extend({
template: '#about',
data: function() {
return {
content: 'huanying2015,这里是关于相关也的页面'
}
}
});
var News = Vue.extend({
template: "#news"
});
var Video = Vue.extend({
template: "#video"
});
var Detail = Vue.extend({
template: '#detail'
});
var router = new VueRouter();
router.map({
'/home': {
name: 'home',
component: Home,
subRoutes: {
'/news': {
name: 'news',
component: News,
subRoutes: {
'/detail/:id': {
name: 'detail',
component: Detail
}
}
},
'/video': {
component: Video
}
}
},
'/about': {
component: About
}
});
router.redirect({
'/': '/home',
'/home': '/home/news'
});
var App = Vue.extend({});
router.start(App, '#app');
</script>
</body>
</html>
Vue router 的使用--初级的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
随机推荐
- java多线程——监视锁(monitor)（转）
https://blog.csdn.net/hqq2023623/article/details/51000153 java中每个对象都有唯一的一个monitor,想拥有一个对象的monitor的话有 ...
- go语言学习--channel的关闭
在使用Go channel的时候,一个适用的原则是不要从接收端关闭channel,也不要在多个并发发送端中关闭channel.换句话说,如果sender(发送者)只是唯一的sender或者是chann ...
- 清除OpenStack网络与路由
下面,我们以删除一个路由设备为例,讲解整个过程(以下命令都在控制节点执行) 列出所有路由设备,获得要删除的路由器id # neutron router-list [root@controller ~] ...
- 无法定位序数****于动态链接库LIBEAY32.dll上
问题出现原因: GNS3打开出现问题 尝试的方法如下: 创建脚本: @echo 开始注册 copy libeay32.dll %windir%\system32 regsvr32 %windir%\s ...
- 梳理源码：spring ioc容器加载的流程图
- 前端UI框架之layUI学习
用layUI框架来进行我们的页面速写,还是非常不错的,虽然2016年诞生,在我使用的过程中,觉得比bootstrap更轻盈点,总结下用的最多的组件. form表单下拉框: <!DOCTYPE h ...
- CS RANK: AI & ML
http://csrankings.org/#/index?ai&mlmining 权威学术排名:30-100
- cas client
(The client and server are the same thekeystore) cas client version: 3.5.1(cas-client-core-3.5.1) gi ...
- 微信小程序 - 布局练习
1.小程序的布局就多了一个flex布局,其他和之前html没太大区别 ,先看代码: (1)wxml <view class='container'> <view class='sel ...
- ECharts动态加载堆叠柱状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...