（17）打鸡儿教你Vue.js

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.redirect

html

使用v-link指令
使用标签

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

吹逼交流群

posted @ 2019-07-02 21:00  达达前端  阅读(138)  评论(0)  编辑  收藏  举报