Vue Router

最新推荐文章于 2024-09-12 22:28:22 发布

原创最新推荐文章于 2024-09-12 22:28:22 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

Vue Router

安装：npm install vue-router -S
配置：
1.在router文件夹下创建一个router.js
2.router.js下

import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter) 安装|注册到全局
const router = new VueRouter({mode: ‘history’,routes})
export default router

3.在main.js中引入router.js
使用：
1.使用路由 (去哪)

< router-link to="/home">首页< /router-link>
< router-view>展示区< /router-view>

router-link 组件属性
to="/home"
tag='li' 指定编译后的标签
active-class='类名' 指定激活后的样式

2.配置路由(建立组件和请求的对应关系) 数组

[{path:’/home’,component:home},{}]

path 路径
component: 指向的组件变量名

3.创建路由(传递配置)

router = new VueRouter(配置)
配置: {routes:数组}

4.顶层|根组件，注册路由（路由控制页面组件的加载）

选项
router(选项):router (router对象)
子路由：children
routes=[{},{path:xx,component:xx,children:[ 子路由 {}… ]},{}]

5.动态路由配置

 {path:'xx/:参数变量',component:xx}
 {path:'/', redirect:'/home'},	//这个是在后面接上/时能直接跳转到home页面

6.传递/接收参数和数据

 router-link to='xx/参数?a=1&b=2'
 router-link :to='{name:'xx',params:{id:1},query:{a:2,b:3}}'

 接收参数和数据
   模板:	{{$route.params|query|path}} 
   组件: this.$route.xxx

7.路由跳转

声明式：< router-link :to="…">

  编程式：
    this.$router.push({name:'...'})   添加一个路由 （记录到历史记录)
    this.$router.replace({name:'...'})   替换一个路由 （不记录到历史记录)
    this.$router.go(-1|1)|goBack()  回退/前进  history.go|goBack

8.路由模式
mode: hash默认带# | history

new VueRouter({mode:xx})

9.路由守卫

全局守卫

   beforeEach((to, from, next) => {
     // ...
   })
   router.afterEach((to, from) => {
     // ...
   })

路由独享的守卫

   beforeEnter: (to, from, next) => {
   	// ...
   }

组件内的守卫

  beforeRouteEnter(to,from,next){}	前置守卫,进入
     to 目标路由
     from 当前路由
     next 是个函数  next() == next(true)  运行跳转
             next(false) 不让跳转
             next('字符路径')/next({对象路径}) 重定向

   beforeRouteLeave(to,from,next){}  后置守卫,离开
   beforeRouteUpdate (to, from, next) {
     // ...
   }

路由数据预载:

 beforeRouteEnter(to,from,next){
   1. 数据附加到目标路由上 to.query.数据名=值
   2. next( _this => _this.属性="拿到的数据")   √
 }

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import My from '../views/My.vue'
import Detail from '../views/Detail.vue'
import Message from '../views/Message.vue'
import Goods from '../views/Goods.vue'
import Login from '../views/Login.vue'
import Error from '../views/Error.vue'

Vue.use(VueRouter)

  const routes = [
  {path: '/home',name: 'Home',component: Home},
  {path: '/',redirect:'/home'}, //这个是在后面接上/时能直接跳转到home页面
  {path: '/message',name: 'Message',component:Message},
  {path: '/my',name: 'My',component: My},
  {path: '/login',name: 'Login',component: Login},
  
  {path: '/goods',name: 'Goods',component:Goods,
  children:[{name:'detail',path:'/detail/:id',component:Detail}]
  },
  {path: '*',name: 'Error',component: Error},

  ]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home" active-class='bckg'>Home</router-link> |
      <router-link to="/message" active-class='bckg'>Message</router-link> |
      <router-link to="/my" active-class='bckg'>My</router-link> |
      <router-link to="/login" active-class='bckg'>Login</router-link> |
      <router-link to="/goods" active-class='bckg' tag='li'>Goods</router-link>  
    </div>
    <router-view/>
  </div>
</template>

<style>
.bckg{background:#f0f}
</style>

Goods.vue

<template>
  <div class="goods">
    <h1>This is an goods page</h1>
    <router-link to="/goods/1">商品001</router-link>
    <router-link to="/goods/2?a=1&b=2">商品002</router-link>
    <!-- <router-link to="/goods/a/b/c/d/e/f/3?a=1&b=2">商品003</router-link> -->
    <router-link :to="{name:'detail',params:{id:3},query:{a:11,b:22}}">商品003</router-link>

    <router-view>子展示区</router-view>
  </div>
</template>

Detail.vue

<template>
  <div class="detail">
    <h1>This is an detail page</h1>

    {{this.$route.params}}/{{this.$route.query}}
  </div>
</template>