vue-router
image.png
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
/* 创建路由器 */
var router = new VueRouter()
image.png
创建组件：
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
创建Router:
var router = new VueRouter()
映射路由:
router.map({
'/home': { component: Home },
'/about': { component: About }
})
key是路径，value是组件
<div class="list-group">
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>
v-link指令跳转到指定路径
<router-view></router-view>
启动路由
var App = Vue.extend({})
router.start(App, '#app')
router.start(App, '#app') 表示router会创建一个App实例
创建组件：创建单页面应用需要渲染的组件
创建路由：创建VueRouter实例
映射路由：调用VueRouter实例的map方法
启动路由：调用VueRouter实例的start方法
使用v-link指令
使用<router-view>标签
router.redirect
html
使用v-link指令
使用<router-view>标签
router.redirect
router.redirect({
'/': '/home'
})
router.redirect方法用于为路由器定义全局的重定向规则
路径/home/news和/home/message
一个路径映射一个组件
<div>
<h1>home</h1>
<p>{{msg}}</p>
</div>
<ul class="nav nav-tabs">
<li>
<a v-link="{path: '/home/news'}"> News </a>
</li>
</ul>
组件构造器：
var Home = Vue.extend({
template: '#home',
data: function(){
return {
msg: 'hello'
}
}
})
var News = Vue.extend({
template: '#news'
})
var Message = Vue.extend({
template: '#message'
})
路由映射
router.map({
'/home': {
component: Home,
// 定义子路由
subRoutes: {
'/news': {
component: News
},
'/message': {
component: Message
}
}
},
'/about': {
component: About
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css"/>
<link rel="stylesheet" href="assets/css/custom.css" />
</head>
<body>
<div id="app">
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Router Basic - 02</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
<template id="home">
<div>
<h1>Home</h1>
<p>{{msg}}</p>
</div>
<div>
<ul class="nav nav-tabs">
<li>
<a v-link="{ path: '/home/news'}">News</a>
</li>
<li>
<a v-link="{ path: '/home/message'}">Messages</a>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<template id="news">
<ul>
<li>News 01</li>
<li>News 02</li>
<li>News 03</li>
</ul>
</template>
<template id="message">
<ul>
<li>Message 01</li>
<li>Message 02</li>
<li>Message 03</li>
</ul>
</template>
<template id="about">
<div>
<h1>About</h1>
<p>This is the tutorial about vue-router.</p>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
var Home = Vue.extend({
template: '#home',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
})
var News = Vue.extend({
template: '#news'
})
var Message = Vue.extend({
template: '#message'
})
var About = Vue.extend({
template: '#about'
})
var router = new VueRouter()
router.redirect({
'/': '/home'
})
router.map({
'/home': {
component: Home,
// 定义子路由
subRoutes: {
'/news': {
component: News
},
'/message': {
component: Message
<a v-link="'home'"> home </a>
<a v-link="{ path: 'home' }">home</a>
<a v-link="{name: 'detail', params: {id: '01'} }">home</a>
$route.path
当前路由对象的路径
$route.params
包含路由中的动态片段和全匹配片段的键值对
$route.query
包含路由中查询参数的键值对
$route.router
路由规则所属的路由器
$route.name
当前路径的名字
执行以下命令安装vue cli
npm install -g vue-cli
使用vue-webpack-simple模板
运行Git Bash Here
vue init webpack-simple my-webpack-simple-demo
image.png
image.png
安装项目依赖
cd my-webpack-simple-demo
npm install
运行示例
npm run dev
发布
npm run build
使用vue-webpack模板
vue init webpack my-webpack-demo
安装依赖
cd my-webpack-demo
npm install
运行示例
npm run dev
发布
npm run build
请点赞！因为你的鼓励是我写作的最大动力！
官方微信公众号
吹逼交流群：711613774
吹逼交流群
网友评论