文章目录
一、基础静态路由
1、引入路由依赖
//引入VueRouter
import VueRouter from 'vue-router'
main.js文件
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
router:router
})
2、该文件专门用于创建整个应用的路由器
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
3、main.js引用上面那个文件
//引入路由器
import router from './router'
4、点击使用路由
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<br>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
5、路由展现位置
<router-view></router-view>
6、其他
- 如果是vue2请安装3版本的路由,不然可能会报警告或者报错
npm i vue-router@3
- 嵌套路由,路由下写路由
- 命名路由,简化路由的跳转,使用":"
作者demo举例
<router-link to="/demo/test/welcome">跳转</router-link>
简化后
<router-link :to"{name:'hello'}">跳转<router-link>
- 简化配合传递参数
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'}
}">跳转<router-link>
- js调用方法,直接跳转到/Enpty
this.$router.replace({
path:'/Empty'
//name: ''
})
7、新人常见错误
成功了会有一个#号
二、嵌套路由(子路由)
- news 就是home的子路由,完整的路由路径为/home/news,子路由前缀不能有 / 号不然会出错。
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail,
}
]
}
]
}
三、路由传递参数
- 父路由组件(发送数据),发送的为query
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
- 子路由组件(接收数据),通过$route就能直接获取到数据
<template>
<ul>
<li>消息编号:{{$route.query.id}}</li>
<li>消息标题:{{$route.query.title}}</li>
</ul>
</template>
四、命名路由
- 目的:当路径过长的时候,方便书写代码
- 定义,比如 /about 被命名为 guanyu
routes:[
{
name:'guanyu',
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
}
]
}
]
}
]
- 使用,浏览器上显示的依旧是 /about,同时要注意 ‘guanyu’ 两边的单引号不能改成双引号。
<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>