1.3 路由的理解
路由
-
理解:一个路由(route)就是一组映射关系(key-value),多个路由需要看路由器(router)进行管理
-
前端路由:key是路径,value是路由组件
基本使用
-
安装vue-router,命令:npm i vue-router
-
应用插件:Vue.use(VueRouter)
-
编写路由配置
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
几个注意点
-
路由组件通常放在pages文件夹下,一般组件通常放在componnets文件夹下
-
通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载
-
每个路由组件都有自己的$route属性,里面存储着自己的路由信息
-
整个应用之只有一个router,可以通过组件的$router属性获取到。
使用
- 配置路由
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}}