Vue中的路由

1.3 路由的理解

---

路由

1. 理解：一个路由（route）就是一组映射关系（key-value），多个路由需要看路由器（router）进行管理

2. 前端路由：key是路径，value是路由组件

基本使用

1. 安装vue-router，命令：npm i vue-router

2. 应用插件：Vue.use(VueRouter)

3. 编写路由配置

import Vue from ‘vue’

//引入vueRouter

import VueRouter from ‘vue-router’

import Home from ‘…/views/Home.vue’

import About from ‘…/views/About.vue.vue’

Vue.use(VueRouter)

const routes = [

{

path: ‘/’,

name: ‘Home’,

component: Home

},

{

path: ‘/about’,

name: ‘About’,

component: About

}

]

//创建router示例对象，去管理一组一组的路由规则

const router = new VueRouter({

routes

})

//暴露router

export default router

几个注意点

1. 路由组件通常放在pages文件夹下，一般组件通常放在componnets文件夹下

2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载

3. 每个路由组件都有自己的$route属性，里面存储着自己的路由信息

4. 整个应用之只有一个router，可以通过组件的$router属性获取到。

使用

1. 配置路由

import Vue from ‘vue’

import VueRouter from ‘vue-router’

import Home from ‘…/views/Home.vue’

import About from ‘…/views/About.vue’

import New from ‘…/views/News.vue’

Vue.use(VueRouter)

const routes = [{

path: ‘/’,

name: ‘Home’,

component: Home,

},

{

path: ‘/about’,

name: ‘About’,

component: About,

children: [{//通过children配置子级路由

path: ‘news’,//此处不要写成：/news

component:News

}]

}

]

const router = new VueRouter({

routes

})

export default router

2.显示路由

3.跳转的时候需要写完整的路径

news

路由传递参数（两种方式）

• About路由组件页面

news|

• <router-link :to="{

  path:‘/about/news’,

  query:{

  id:m.id,

  name:m.name

  }

  }">{{m.name}}

  • News路由组件页面
• hi:{{this.$route.query.id}}我是{{this.$route.query.name}}