vue-router（路由）详细教程

import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件 Vue.use(Router) //Vue全局使用Router export default new Router({ routes: [ //配置路由，这里是个数组 { //每一个链接都是一个对象 path: '/', //链接路径 name: 'Hello', //路由名称， component: Hello //对应的组件模板 }，{ path:'/hi', component:Hi, children:[ //子路由,嵌套路由 （此处偷个懒，免得单独再列一点） { 
   path:'/',component:Hi}, { 
   path:'hi1',component:Hi1}, { 
   path:'hi2',component:Hi2}, ] } ] }) 

<router-link to="/">[text]</router-link>

<transition name="fade"> <router-view ></router-view> </transition> 

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

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

const User = { template: '<div>User</div>' } const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] }) 

<router-link :to="{name:‘dxl’,params:{key:value}}">东西里</router-link>

{
    path:'/params/:newsId/:userName,
    component:Params
}

<template>
    <div>
        <h2>{
  
  { msg }}</h2>
        <p>新闻ID：{
  
  { $route.params.newsId}}</p>
        <p>用户名：{
  
  { $route.params.userName}}</p>
    </div>
</template>
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

<router-link to="/params/888/dxl shuai>params</router-link>

const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 

const User = { template: '...', beforeRouteUpdate (to, from, next) { // react to route changes... // don't forget to call next() } } 

// 定义路由的时候如下定义，name也可为中文 const routes = [ { path: '/goods', component: goods, name: 'goods' }, { path: '/orders', component: orders, name: 'orders' }, { path: '/seller', component: seller, name: 'seller' } ]; // 创建路由实例 const router = new VueRouter({ routes: routes }) // 关键在这里，设置afterEach钩子函数 router.afterEach((to, from, next) => { document.title = to.name; }) 

const routes = [ { path: '/', redirect: '/goods'} ] 重定向的目标也可以是一个命名的路由。 const routes = [ { path: '/', redirect: { name: 'goods' }} ] 重定向时也可以传递参数 { path:'/', redirect:'/goods/:newsId(\\d+)/:userName' } 

{ path: '/hi', component: Hi, alias:'/dxl' } 

<router-link to="/dxl">jspang</router-link>

{ path: '/', component: Hello, alias:'/home' } 

const userId = 123 router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 这里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user 

// 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) 

<script>
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
}
</script>

{ path:'/params/:newsId(\\d+)/:userName', component:Params, beforeEnter:(to,from,next)=>{ console.log('我进入了params模板'); console.log(to); console.log(from); next(); }, 

export default { name: 'params', data () { return { msg: 'params page' } }, beforeRouteEnter:(to,from,next)=>{ console.log("准备进入路由模板"); next(); }, beforeRouteLeave: (to, from, next) => { console.log("准备离开路由模板"); next(); } } 

<template>
  <div class="post">
    <div class="loading" v-if="loading">
      Loading...
    </div>
    <div v-if="error" class="error">
      {
  
  { error }}
    </div>
    <div v-if="post" class="content">
      <h2>{
  
  { post.title }}</h2>
      <p>{
  
  { post.body }}</p>
    </div>
  </div>
</template>
export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

export default { data () { return { post: null, error: null } }, beforeRouteEnter (to, from, next) { getPost(to.params.id, (err, post) => { next(vm => vm.setData(err, post)) }) }, // 路由改变前，组件就已经渲染完了 // 逻辑稍稍不同 beforeRouteUpdate (to, from, next) { this.post = null getPost(to.params.id, (err, post) => { this.setData(err, post) next() }) }, methods: { setData (err, post) { if (err) { this.error = err.toString() } else { this.post = post } } } } 

const router = new VueRouter({ mode: 'history', routes: [...] }) 

const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: Error} ] }) 

const User = { template: '<div>User { 
    { $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) 

const User = { props: ['id'], template: '<div>User { 
    { id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项： { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] }) 

const router = new VueRouter({ routes: [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } ] }) 

const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } ] }) 

function dynamicPropsFn (route) { const now = new Date() return { name: (now.getFullYear() + parseInt(route.params.years)) + '!' } } const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/', component: Hello }, // No props, no nothing { path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props { path: '/static', component: Hello, props: { name: 'world' }}, // static values { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props { path: '/attrs', component: Hello, props: { name: 'attrs' }} ] })