r o u t e 和 route和 route和router的区别:
router的基本使用
===========
main.js
- 挂载路由
import Vue from ‘vue’
import App from ‘./App’
// 默认导入router文件夹下的内容
import router from ‘./router’
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,//挂载路由,把路由注入为Vue对象方便使用
render: h => h(App)
})
App.vue
- 路由跳转的两种方法
router-link 其他属性:
-
to:用于指定跳转的路径
-
tag:可以指定router-link标签之后渲染成什么html元素
-
replace(没有返回记录):在history模式下指定router-link使用的是replaceState,而不是一个pushState()
-
active-class:设置对应路由匹配成功时,会给当前选中元素设置一个active-class属性类名
<button @click=“homeClick”>首页
<button @click=“aboutClick”>关于
router文件夹下的index.js(抽离router)
路由模式:
hash:历史模式,不会制造页面刷新
history:不会有历史,不会制造页面刷新
注意:路由重复点击会报错,降级router插件到到3.5版本以下
此处可以配置活跃路由的类名,如果多个router-link都要类名,可以在路由中统一配置
// 引用文件
import Vue from ‘vue’
import Router from ‘vue-router’
import Home from ‘…/components/Home’
import About from ‘…/components/About’
// 1.通过Vue.use(插件),安装插件
Vue.use(Router)
// export default(导出) 将Router对象传入到vue实例
export default new Router({
// 2.创建Router对象
// 配置路由和组件之间的映射关系
// routes是固定写法
routes: [
{
path:‘’,
// 重定向
redirect:‘/home’
},
{
// 定义路径
path: ‘/home’,
name: ‘HelloWorld’,
// component显示
component: Home
},
{
path:‘/about’,
component:About //组件名
},
],
mode:‘history’,
// 全局配置激活路由的class类名,处与活跃(动态)就会用上这个类名
linkActiveClass:‘active’
})
动态传参+编程式导航
==========
路由路径后加/:id就可以变成动态路由
App.vue
<button @click=“toHome”>首页
<button @click=“toUser”>用户
user.vue组件
用户组件
欢迎 {{uname}} 来到用户页面
//输出一或二切换输出名字:{{$route.params.id}}
嵌套路由
=====
页面中使用this.$route:获取活跃的组件;
this.$router:获取router整个路由
//配置路由的相关信息
import Vue from ‘vue’
import Router from ‘vue-router’
// 1.通过vue.use安装插件
Vue.use(Router);
// 引用组件
import Home from ‘…/components/Home.vue’
import User from ‘…/components/User.vue’
import News from ‘…/components/News.vue’
import Msg from ‘…/components/Msg.vue’
// 配置路由和组件之间的引用关系
const routes =[
{
path:‘/’,
// 重定向redirect
redirect:‘/home’
},
{
path:‘/home’,
component:Home ,
// 使用嵌套路由用children属性
children:[
{
path:‘/home’,
redirect:‘/home/news’
},
{//子路由加斜杠会被当作根路径
path:‘news’,
component:News
},
{
path:‘msg’,
component:Msg
},
]
},
{
path:‘/user/:id’,
component:User
},
]
// 创建vue-router对象
const router = new Router({
routes,
// 没历史
mode:‘history’,
linkActiveClass:‘active’
})
// 3.把router导出给vue实例
export default router
// $route:指向活跃的组件
// $router:指向router整个路由
路由传参,懒加载
=========
router的index.js
/配置路由的相关信息
import Vue from ‘vue’
import Router from ‘vue-router’
// 1.通过vue.use安装插件
Vue.use(Router);
// 懒加载
const User = ()=> import(‘…/views/User.vue’)
const Info = ()=> import(‘…/views/info.vue’)
const routes =[
// {
// path:‘/home’,
// name:‘Home’,//命名路由
// component:Home
// },
{
// 配置动态路由
path:‘/user/:id’,
name:‘User’,
// 懒加载
component:User
},
{
path:‘/info’,
name:‘Info’,
component:Info
},
]
const router = new Router({
routes,
// 没历史
mode:‘history’,
// linkActiveClass:‘active’
})
// 3.把router导出给vue实例
export default router
Info组件
这是信息组件
//$route接收参数
姓名:{{$route.query.name}}
年龄:{{$route.query.age}}
User组件
用户信息
//页面中有两个params.id,点击谁就显示哪个id
用户编号{{$route.params.id}}
App.vue
user|
info
<button @click=“toUser”>user
user–name
info-path
<button @click=“toInfo”>info