vue-router
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
/* Create router */ var router = new VueRouter()
Create component:
<script src="js/vue.js"></script> <script src="js/vue-router.js"></script>
Create Router:
var router = new VueRouter()
Map routes:
router.map({
'/home': { component: Home },
'/about': { component: About }
})
key is the path, value is the component
<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 instruction jumps to the specified path
<router-view></router-view>
Startup routing
var App = Vue.extend({})
router.start(App, '#app')
router.start(App, '"App") means router will create an App instance
Create component: create components to be rendered for single page application
Create route: create an instance of VueRouter
Map route: call the map method of the VueRouter instance
Start route: call the start method of the VueRouter instance
Using the v-link instruction
Use labels
router.redirect
html
Using the v-link instruction
Use labels
router.redirect
router.redirect({
'/': '/home'
})
The router.redirect method is used to define global redirection rules for routers
Path / home/news and / home/message
A path map a component
<div>
<h1>home</h1>
<p>{{msg}}</p>
</div>
<ul class="nav nav-tabs">
<li>
<a v-link="{path: '/home/news'}"> News </a>
</li>
</ul>
Component Builder:
var Home = Vue.extend({
template: '#home',
data: function(){
return {
msg: 'hello'
}
}
})
var News = Vue.extend({
template: '#news'
})
var Message = Vue.extend({
template: '#message'
})
Route mapping
router.map({
'/home': {
component: Home,
// Define child routes
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,
// Define child routes
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 The path of the current routing object $route.params Contains key value pairs of dynamic and full match segments in the route $route.query Contains key value pairs of query parameters in the route $route.router Router to which the routing rule belongs $route.name The name of the current path
Execute the following command to install vue cli
npm install -g vue-cli
Using the Vue webpack simple template
Run Git Bash Here
vue init webpack-simple my-webpack-simple-demo
Installation project dependency
cd my-webpack-simple-demo npm install
Operation example
npm run dev
Release
npm run build
Using the Vue web pack template
vue init webpack my-webpack-demo
Installation dependency
cd my-webpack-demo npm install
Operation example
npm run dev
Release
npm run build
Please praise! Because your encouragement is the biggest driving force of my writing!
Forced communication group: 711613774
