1. Vue - router

• Vue Router是 Vue.js 官方的路由管理器
• 它和Vue.js的核心深度集成,可以非常方便的用于SPA應用程序的開發(fā)

Vue Router包含的功能有:

• 支持HTML5歷史模式或hash模式
• 支持嵌套路由
• 支持路由參數
• 支持編程式路由
• 支持命名路由

<div id="app"><router-link to='/user'>User</router-link><router-link to='/register'>Register</router-link><!-- 將來通過路由規(guī)則匹配到的組件,將會被渲染到router-view所在的位置--><router-view></router-view> </div> <script>const User={template: `<h1>User</h1>`}const Register={template: `<h1>Register</h1>`}const router = new VueRouter({routes:[{path: '/user',component: User},{path: '/register',component: Register}]})const vm = new Vue({el:'#app',data: {},router}) </script>

1.1 路由重定向

var router = new VueRouter({routes:[{ path: '/', redirect: '/user'},{ path: '/user', component: User},{ path: '/register', component: Register}] })

1.2 嵌套路由

const router = new VueRouter({routes:[{ path: '/user', component: User },{ path: '/register',component: Register,children: [{ path: '/register/tab1', component: Tab1 },{ path: '/register/tab2', component: Tab2}]}] })

1.3 動態(tài)路由匹配

• 以下路由規(guī)則該如何匹配

<router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link>

• 進行動態(tài)路由匹配

var router = new VueRouter({routes: [{path: '/user/:id', component: User}] }) // 匹配得到的參數存在 $route.params 中 const User = {template: '<div>User {{ $route.params.id }}</div>' }

1.4 路由組件傳遞參數

props的值為布爾類型

const router = new VueRouter({routes:[{ path: '/user/:id', component: User, props: true}] }) const User = {props: ['id'],template: `<div>用戶ID: {{ id }}</div>` }

props的值為對象類型

const router = new VueRouter({routes: [{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 12}}] }) const User = {props: ['uname', 'age'],template: '<div>用戶信息: {{ uname + '---' + age}}</div>' }

props的值為函數類型

const router = new VueRouter({routes:[{ path: '/user/:id', component: User, props: route => ({ uname: 'zs', age:20, id: route.params.id })}] }) const User = {props: ['uname', 'age', 'id'],template: '<div>用戶信息: {{ uname + '---' + age + '---' +id}}</div>' }

1.5 命名路由

• 未來更加方便的表示路由的路徑,可以給路由規(guī)則起一個別名,即為"命名路由"

<router-link :to="{ name: 'user', params: {id: 123}}">User</router-link> <script>const router = new VueRouter({routes:[{ path: '/user/:id', name: 'user', component: User}]})const User = {template: `<div><h1> User -- {{$route.parmas.id}} </h1></div>`} </script>

1.6 編程式導航

• 聲明式導航: 通過點擊鏈接實現導航的方式,叫做聲明式導航
  • 普通網頁: 點擊<a></a>
  • vue: <router-link></router-link>
• 編程式導航: 通過JavaScript形式中的API實現導航的方式
  • 普通網頁中: location.href
  • Vue:
    • this.$router.push(‘hash地址’)
    • this.$router.go(n) - 前進后退

// this.$router.push const User = {template: `<div><h1>User {{$route.params.id}} 組件</h1><button @click="goRegister">跳轉到注冊頁面</button></div>`,methods:{goRegister(){this.$router.push('/register')}} }// this.$router.go const Register = {template: `<div><h1>Register</h1><button @click="goBack">后退</button></div>`,methods: {goBack() {this.$router.go(-1)}} }

• router.push()方法的參數規(guī)則

// 字符串(路徑名稱) router.push('/home')// 對象 router.push({ path: '/home'})// 命名的路由(傳遞參數) router.push({ name: '/user', params: { userId: 123}})// 帶查詢參數,變成 /register?uname=lisi router.push({ path: '/register', query: { uname: 'lisi'}})

總結

以上是生活随笔為你收集整理的vue --- [全家桶]vue-router的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。