vue-----路由

vue-----路由

使用vue-cli安装不需要另外安装路由，只需要在安装时候选择Manually select features，然后选到router按下空格就行**

  • vue路由分为前端路由和后端路由

路由配置

  • Router

  • Views

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

初始化路由

在路由模块的入口文件index.js配合router

```//引入vue
import Vue from 'vue';
//引入router
import VueRouter from 'vue-router'
//引入组件
import Home from "../xxx/Home.vue";
import About from "../xxx/About.vue"
​
//全局配置路由
Vue.use(VueRouter)
​
//集成路由
const routes = [
 {
 //路径
 path:"/",
 //路由名称
 name:"home",
 //路由加载的组件
 component:Home
 },
 {
 path:"/about",
 name:"about",
 component:About,
 }
]
const router = new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes
})
​
export default router```

#### 嵌套路由

嵌套路由用到了children属性，实现嵌套

```//引入vue
import Vue from 'vue';
//引入router
import VueRouter from 'vue-router'
//引入组件
import Home from "../xxx/Home.vue";
import Hot from "../views/Hot.vue";
​
//全局配置路由
Vue.use(VueRouter)
​
//集成路由
const routes = [
 {
 //路径
 path:"/",
 //路由名称
 name:"home",
 //路由加载的组件
 component:Home,
 //嵌套路由
 children:[
 {
 path: "/hot",
 name: "hot",
 component: Hot
 }
 ]
 },
]
const router = new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes
})
​
export default router```

路由管理下的组件都会加载到一个router-view标签中，在app.vue中有一个最大的router-view标签管理所有组件

```<template>
 <div>
 <!-- app.vue -->
 <!-- 路由管理下的组件都加载router-view里面 -->
 <router-view/>
 </divvue
</template>```

home.vue

```<template>
 <div>
 <button @click="onClick">点击跳转</button>
 <!-- 如果home页面有嵌套路由 也会加载在router-view里面 -->
 <router-view/>
 </div>
</template>
​
<script>
 export default{
 methods:{
 onClick(){
 //点击跳转嵌套路由
 this.$router.push("/hot")
 }
 }
 }
</script>```

#### 编程式导航

*   在vue实力内部，你可以通过$router访问路由实例，因此你可以调用this.$router.push跳转，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

*   this.$router.push有两种跳转方式，一个是path+query，另一个是name+params

**path+query**

```this.$router.push({
 path:'/hello',
 query:{
 name:'word',
 age:'11'
 }
})```

**name+params**

```this.$router.push({
 name:'hello',
 params:{
 name:'word',
 age:'11'
 }
})```
一般推荐使用path+query进行路由传参

*   使用params带参数，需要对应使用name来指明路径，query带参数，则path,name都可以

*   .params带参数跳转，在跳转后页面再进行跳转或刷新都有可能导致数据丢失，建议使用query带参数

*   query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

*   params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系

*   params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传递这个参数，会导致跳转失败或者页面没有内容，比如跳转router1/:id

    ```<router-link :to="{name:'router1',params:{id:staus}}">正确</router-link>
    <router-link :to="{name:'router1',params:{id2:staus}}">错误</router-link>```

#### 命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 `sidebar` (侧导航) 和 `main` (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 `router-view` 没有设置名字，那么默认为 `default`。

```<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components配置 (带上 s)：

  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

在这个默认路由下面，

第一个非未命名视图显示Foo组件

第二个name名为a的视图显示Bar组件

name名为b的视图显示Baz组件

下面这个是一个示例

　　<div class="hello">
　　　　<ul class="nav">
　　　　　　<li><router-link to="/list1">list1</router-link></li>
　　　　　　<li><router-link to="/list2">list2</router-link></li>
　　　　　　<li><router-link to="/list3">list3</router-link></li>
　　　　</ul>
　　　　<h6>默认视图</h6>
　　　　<div class="view">
　　　　　　<router-view></router-view>
　　　　</div>
　　　　<h6>a视图</h6>
　　　　<div class="view">
　　　　　　<router-view name="a"></router-view>
　　　　</div>
　　　　<h6>b视图</h6>
　　　　<div class="view">
　　　　　　<router-view name="b"></router-view>
　　　　</div>
　　</div>
</template>

router配置：

　　{
　　　　path: '/',
　　　　name: 'HelloWorld',
　　　　component: HelloWorld,
　　　　children:[
　　　　　　{
　　　　　　　　path:'',
　　　　　　　　components:{
　　　　　　　　　　default:List1,
　　　　　　　　　　a:List2,
　　　　　　　　　　b:List3
　　　　　　　　}
　　　　　　},
　　　　　　{
　　　　　　　　path:'list1',
　　　　　　　　components:{
　　　　　　　　　　default:List1,
　　　　　　　　　　a:List2,
　　　　　　　　　　b:List3
　　　　　　　　}
　　　　　　　},
　　　　　　　{
　　　　　　　　path:'list2',
　　　　　　　　components:{
　　　　　　　　　　default:List2,
　　　　　　　　　　a:List1,
　　　　　　　　　　b:List3
　　　　　　　　}
　　　　　　},
　　　　　　{
　　　　　　　　path:'list3',
　　　　　　　　components:{
　　　　　　　　　　default:List3,
　　　　　　　　　　a:List1,
　　　　　　　　　　b:List2
　　　　　　　　}
　　　　　　}
　　　　]
　　}
]

嵌套命名视图

我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件

  path: '/',
  // 你也可以在顶级路由就配置命名视图
  component: name,
      //嵌套路由
  children: [{
    path: '/emails',
    component: UserEmailsSubscriptions
  },
  {
    path: 'profile',
      //命名视图
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
 }}
 ]
})

代码示例:

 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'
 }
 }
}

导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

全局前置守卫beforeEach

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之

前一直处于 等待中。

你可以使用 router.beforeEach 注册一个全局前置守卫：

let loginStatus = false

const router = [
  {
    path: '/',
    name: 'Home',
    component: Home,
      //设置meta前往路由是否需要通过守卫
    meta: {
      isLogin: false
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: {
      isLogin: false
    }
  },
  {
    path: "/mine",
    name: "mine",
    component: () => import("../views/Mine.vue"),
    meta: {
      isLogin: true
    }
  }
]

// 参数分别是 即将进入的页面  正要离开的路由 一定要调用next才能生效
router.beforeEach((to, from, next) => {
  // 如果要进入的页面需要登录
  if (to.meta.isLogin === true) {
    // 如果登录状态为未登录
    if (loginStatus === false) {
      // 则去登录
      next("/login")
    } else {
      // 否则直接跳转
      next()
    }
  } else {
    next()
  }
})

路由独享守卫beforeEnter

const routes = [
  {
    path: "/shoppinglist",
    name: "shoppinglist",
    component: ShoppingList,
    // 设置路由独享守卫
    beforeEnter: (to, from, next) => {
      // 判断登录状态
      if (loginStatus === false) {
        next("/login")
      } else {
        next()
      }
    }
  }
]

组件内守卫beforeRouteLeave

export default {
  // 设置组件内守卫beforeRouteLeave
  beforeRouteLeave (to, from, next) {
    window.console.log(to)
    window.console.log(from)
    window.alert("真的要离开吗")
    next()
  }
}
</script>

每个守卫方法接收三个参数：

  • to: Route: 即将要进入的目标 路由对象

  • from: Route: 当前导航正要离开的路由

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

    • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,951评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,606评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,601评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,478评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,565评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,587评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,590评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,337评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,785评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,096评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,273评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,935评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,578评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,199评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,440评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,163评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,133评论 2赞 352