Vue.js路由vue-router使用方法详解

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

var Home = Vue.extend({
 template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
 data: function() {
  return {
   msg: 'Hello, vue router!'
  }
 }
})

var About = Vue.extend({
 template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

var router = new VueRouter()

router.map({
 '/home': { ponent: Home },
 '/about': { ponent: About }
})

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

<router-view></router-view>

var App = Vue.extend({})
router.start(App, '#app')

router.redirect({
 '/': '/home'
})

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

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'
})

router.map({
 '/home': {
  ponent: Home,
  // 定义子路由
  subRoutes: {
   '/news': {
    ponent: News
   },
   '/message': {
    ponent: Message
   }
  }
 },
 '/about': {
  ponent: About
 }
})

<template id="newsDetail">
 <div>
  News Detail - {{$route.params.id}} ......
 </div>
</template>

var NewsDetail = Vue.extend({
 template: '#newsDetail'
})

router.map({
 '/home': {
  ponent: Home,
  subRoutes: {
   '/news': {
    name: 'news',
    ponent: News,
    subRoutes: {
     'detail/:id': {
      name: 'detail',
      ponent: NewsDetail
     }
    }
   },
   '/message': {
    ponent: Message
   }
  }
 },
 '/about': {
  ponent: About
 }
})

<template id="home">
 <div>
  <h1>Home</h1>
  <p>{{msg}}</p>
 </div>
 <div>
  <ul class="nav nav-tabs">
   <li>
    <a v-link="{ name: 'news'}">News</a>
   </li>
   <li>
    <a v-link="{ path: '/home/message'}">Messages</a>
   </li>
  </ul>
  <router-view></router-view>
 </div>
</template>

<template id="news">
 <div>
  <ul>
   <li>
    <a v-link="{ name: 'detail', params: {id: '01'} }">News 01</a>
   </li>
   <li>
    <a v-link="{ path: '/home/news/detail/02'}">News 02</a>
   </li>
   <li>
    <a v-link="{ path: '/home/news/detail/03'}">News 03</a>
   </li>
  </ul>
  <div>
   <router-view></router-view>
  </div>
 </div>
</template>
<a v-link="{ name: 'news'}">News</a>和<a v-link="{ name: 'detail', params: {id: '01'} }">News 01</a>

<!-- 字面量路径 -->
<a v-link="'home'">Home</a>

<!-- 效果同上 -->
<a v-link="{ path: 'home' }">Home</a>

<!-- 具名路径 -->
<a v-link="{ name: 'detail', params: {id: '01'} }">Home</a>

<div>
 <p>当前路径{{$route.path}}</p>
 <p>当前参数{{$route.params | json}}</p>
 <p>路由名称{{$route.name}}</p>
 <p>路由查询参数{{$route.query | json}}</p>
 <p>路由匹配项{{$route.matched | json}}</p>
</div>

<a class="list-group-item" v-link="{ path: '/home', activeClass: 'active'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about', activeClass: 'active'}">About</a>

<ul class="nav nav-tabs">
 <li class="active">
  <a v-link="{ path: '/home/news'}">News</a>
 </li>
 <li>
  <a v-link="{ path: '/home/message'}">Messages</a>
 </li>
</ul>

<ul class="nav nav-tabs">
 <li :class="currentPath == '/home/news' ? 'active': ''">
  <a v-link="{ path: '/home/news'}">News</a>
 </li>
 <li :class="currentPath == '/home/message' ? 'active': ''">
  <a v-link="{ path: '/home/message'}">Messages</a>
 </li>
</ul>

var Home = Vue.extend({
 template: '#home',
 data: function() {
  return {
   msg: 'Hello, vue router!',
   currentPath: ''
  }
 },
 route: {
  data: function(transition){
   transition.next({
    currentPath: transition.to.path
   })
  }
 }
})

该示例运行

var well = new Vue({
 el: '.well',
 data: {
  msg: '',
  color: '#ff0000'
 },
 methods: {
  setColor: function(){
   this.color = '#' + parseInt(Math.random()256).toString(16)
      + parseInt(Math.random()256).toString(16)
      + parseInt(Math.random()256).toString(16)
  },
  setColoredMessage: function(msg){
   this.msg += '<p style="color: ' + this.color + '">' + msg + '</p>'
  },
  setTitle: function(title){
   this.msg = '<h2 style="color: #333">' + title + '</h2>'
  }
 }
})

<div class="well">
 {{{ msg }}}
</div>

function RouteHelper(name) {
 var route = {
  canReuse: function(transition) {
   well.setColoredMessage('执行组件' + name + '的钩子函数:canReuse')
   return true
  },
  canActivate: function(transition) {
   well.setColoredMessage('执行组件' + name + '的钩子函数:canActivate')
   transition.next()
  },
  activate: function(transition) {
   well.setColoredMessage('执行组件' + name + '的钩子函数:activate')
   transition.next()
  },
  canDeactivate: function(transition) {
   well.setColoredMessage('执行组件' + name + '的钩子函数:canDeactivate')
   transition.next()
  },
  deactivate: function(transition) {
   well.setColoredMessage('执行组件' + name + '的钩子函数:deactivate')
   transition.next()
  },
  data: function(transition) {
   well.setColoredMessage('执行组件' + name + '的钩子函数:data')
   transition.next()
  }
 }
 return route;
}

var Home = Vue.extend({
 template: '#home',
 data: function() {
  return {
   msg: 'Hello, vue router!',
   path: ''
  }
 },
 route: RouteHelper('Home')
})

var News = Vue.extend({
 template: '#news',
 route: RouteHelper('News')
})

var Message = Vue.extend({
 template: '#message',
 route: RouteHelper('Message')
})

var About = Vue.extend({
 template: '#about',
 route: RouteHelper('About')
})