Vue學習筆記之路由篇

tony0087發表於2021-09-09
Vue筆記路由

（一）安裝

直接下載/CDN
NPM
npm install vue-router

如果在一個模組化工程中使用它，必須要透過 Vue.use() 明
確地安裝路由功能：

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

如果使用全域性的 script 標籤，則無須如此（手動安裝）。

（二）基礎

1、例項

HTML


  
Hello App!

  

    <!-- 使用 router-link 元件來導航. --&gt
    <!-- 透過傳入 `to` 屬性指定連結. --&gt
    <!--  預設會被渲染成一個 `` 標籤 --&gt
    Go to Foo
    Go to Bar
  

  <!-- 路由出口 --&gt
  <!-- 路由匹配到的元件將渲染在這裡 --&gt
  

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

3、巢狀路由

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

html>

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')
5、命名檢視

有時候想同時（同級）展示多個檢視，而不是巢狀展示，例如建立一個佈局，有 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

html>

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

html>

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')
7、路由元件傳參

HTML

html>

Javascript

export default {  props: {    name: {      type: String,      default: 'Vue!'
    }
  }
}
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')



作者：逆襲的小菜鳥
連結：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/1747/viewspace-2814176/，如需轉載，請註明出處，否則將追究法律責任。

相關文章