Vue学习笔记之路由篇

（一）安装

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明
确地安装路由功能：

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)

如果使用全局的 script 标签，则无须如此（手动安装）。

HTML

  Hello App!
  

    
    
    
    Go to Foo
    Go to Bar
  
  
  
  

Javascript

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义（路由）组件。// 可以从其他文件 import 进来const Foo = { template: 'foo' }const Bar = { template: 'bar' }// 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器，// 或者，只是一个组件配置对象。// 我们晚点再讨论嵌套路由。const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({
  routes // （缩写）相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能const app = new Vue({
  router
}).$mount('#app')// 现在，应用已经启动了！

2、动态路由匹配

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
HTML

  

    /user/foo
    /user/bar
  
  

Javascript

const User = {
  template: `User {{ $route.params.id }}`
}const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})const app = new Vue({ router }).$mount('#app')

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query（如果 URL 中有查询参数）、$route.hash 等等。

HTML

  

    /user/foo
    /user/foo/profile
    /user/foo/posts
  
  

Javascript

const User = {  template: `
    
      User {{ $route.params.id }}
      
    
  `}const UserHome = { template: 'Home' }const UserProfile = { template: 'Profile' }const UserPosts = { template: 'Posts' }const router = new VueRouter({  routes: [
    { path: '/user/:id', component: User,      children: [        // UserHome will be rendered inside User's 
        // when /user/:id is matched
        { path: '', component: UserHome },                
        // UserProfile will be rendered inside User's 
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },        // UserPosts will be rendered inside User's 
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})const app = new Vue({ router }).$mount('#app')

4、命名路由

HTML

 Examples index

Javascript

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: 'This is Home' }
const Foo = { template: 'This is Foo' }
const Bar = { template: 'This is Bar {{ $route.params.id }}' }

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/foo', name: 'foo', component: Foo },
    { path: '/bar/:id', name: 'bar', component: Bar }
  ]
})

new Vue({
  router,
  template: `    
      Named Routes
      
Current route name: {{ $route.name }}
      

        
home
        
foo
        
bar
      
      
    
  `
}).$mount('#app')

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。
HTML

  Named Views
  

    

      /
    
    

      /other
    
  
  
  
  

Javascript

const Foo = { template: 'foo' }const Bar = { template: 'bar' }const Baz = { template: 'baz' }const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/',      // a single route can define multiple named components
      // which will be rendered into s with corresponding names.
      components: {        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/other',
      components: {        default: Baz,
        a: Bar,
        b: Foo
      }
    }
  ]
})new Vue({
    router,
  el: '#app'})

6、重定向和别名

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
HTML

 Examples index

Javascript

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '' }
const Default = { template: 'default' }
const Foo = { template: 'foo' }
const Bar = { template: 'bar' }
const Baz = { template: 'baz' }
const WithParams = { template: '{{ $route.params.id }}' }

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Home,
      children: [
        { path: '', component: Default },
        { path: 'foo', component: Foo },
        { path: 'bar', component: Bar },
        { path: 'baz', name: 'baz', component: Baz },
        { path: 'with-params/:id', component: WithParams },
        // relative redirect to a sibling route
        { path: 'relative-redirect', redirect: 'foo' }
      ]
    },
    // absolute redirect
    { path: '/absolute-redirect', redirect: '/bar' },
    // dynamic redirect, note that the target route `to` is available for the redirect function
    { path: '/dynamic-redirect/:id?',
      redirect: to => {
        const { hash, params, query } = to
        if (query.to === 'foo') {
          return { path: '/foo', query: null }
        }
        if (hash === '#baz') {
          return { name: 'baz', hash: '' }
        }
        if (params.id) {
          return '/with-params/:id'
        } else {
          return '/bar'
        }
      }
    },
    // named redirect
    { path: '/named-redirect', redirect: { name: 'baz' }},

    // redirect with params
    { path: '/redirect-with-params/:id', redirect: '/with-params/:id' },

    // catch all redirect
    { path: '*', redirect: '/' }
  ]
})

new Vue({
  router,
  template: `    
      Redirect
      

        

          /relative-redirect (redirects to /foo)        
        

          /relative-redirect?foo=bar (redirects to /foo?foo=bar)        
        

          /absolute-redirect (redirects to /bar)        
        

          /dynamic-redirect (redirects to /bar)        
        

          /dynamic-redirect/123 (redirects to /with-params/123)        
        

          /dynamic-redirect?to=foo (redirects to /foo)        
        

          /dynamic-redirect#baz (redirects to /baz)        
        

          /named-redirect (redirects to /baz)        
        

          /redirect-with-params/123 (redirects to /with-params/123)        
        

          /not-found (redirects to /)        
      
      
    
  `
}).$mount('#app')

『别名』的意思是，/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
HTML

 Examples index

Javascript

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: 'Home' }
const Foo = { template: 'foo' }
const Bar = { template: 'bar' }
const Baz = { template: 'baz' }

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/home', component: Home,
      children: [
        // absolute alias
        { path: 'foo', component: Foo, alias: '/foo' },
        // relative alias (alias to /home/bar-alias)
        { path: 'bar', component: Bar, alias: 'bar-alias' },
        // multiple aliases
        { path: 'baz', component: Baz, alias: ['/baz', 'baz-alias'] }
      ]
    }
  ]
})

new Vue({
  router,
  template: `    
      Route Alias
      

        

          /foo (renders /home/foo)        
        

          /home/bar-alias (renders /home/bar)        
        

          /baz (renders /home/baz)
        
        

          /home/baz-alias (renders /home/baz)        
      
      
    
  `
}).$mount('#app')

HTML

 Examples index

Javascript

import Vue from 'vue'import VueRouter from 'vue-router'import Hello from './Hello.vue'Vue.use(VueRouter)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' }}
  ]
})new Vue({
  router,  template: `
    
      Route props
      

        
/
        
/hello/you
        
/static
        
/dynamic/1
        
/attrs
      
      
    
  `}).$mount('#app')

作者：逆袭的小菜鸟
链接：