正文
Vue学习(三)-Vue-router路由的简单使用
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一.Vue-Router环境的安装:
如果使用vue-cli脚手架搭建,项目创建过程中会提示你自否选择使用vue-router,选择使用即可,
二.路由学习1.路由的配置
vue-cli项目自动创建的路由文件是src包下面的router.js文件,你也可以创建一个文件夹.单独放置路由的js文件
例如,
路由js文件的结构
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
//path 表示路由的路径
path: '/',
//component 表示路由路径对应的组件(这里配置的是路由懒加载，不使用这个路由就不加载，提高性能)
component: () => import('./views/Parent.vue'),
//redirect 表示路由的重定向，表示访问该路由时（Parent路由）会重定向到另一个路由
redirect: '/form'
},
{
path: '/home/:id',
//name表示为路由取一个名称
name: 'home',
component: () => import('./views/Home.vue'),
//嵌套路由,这里就是嵌套了一个children路由组件
children: [{
path: '/child',
component: () => import('./views/Child.vue')
}]
}
]
})
2.路由的导航（路由的跳转）
使用<router-view>把标签进行路由的渲染,用于渲染匹配到的组件，最高级时App.vue,router.js里面的路由都可以使用router-view将组件渲染到App.vue下面，
router-link标签完成路由的跳转
两种方式:
1.通过<router-link>点击这里跳转</router-link>标签去跳转
router-link是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接的地址
2.编程式导航（录入登录页面，点击登录，获取到ajax请求的结果后可以进行登录）
通过方法去触发导航
this.$router.push({name:'路由名称'，params:{id:3}}) 通过路由名称name去导航 （通常时和params参数组合）
this.$router.push({path:'路由路径',query:{name:'Jack'}}) 通过路由路径path去导航（通常时通过query参数组合使用）
<template>
<div id="app">
<!-- this is app -->
<button @click="toHome">编程式导航</button>
<!--router-link标签导航-->
<router-link to="/home/123">点击跳转到home组件</router-link>
<router-view></router-view>
</div>
</template><script>
import bus from './util/bus'
import MParent from './views/Parent'
export default {
data () {
return {
a: 'msga',
b: 'msga',
c: 'msga',
}
},
components: {
MParent,
},
methods: {
passMsg () {
bus.$emit('msg', 'i am from app')
},
toHome () {
// this.$router.push({ path: '/home', query: {name: 'Jack'} })
//编程式导航
this.$router.push({ name: 'home', params: {id: 3} })
}
},
}
</script>
3.动态路由
什么是动态路路由
组件是同一个，只是通过不不同的url参数渲染不不同的数据
路路径参数"使用冒号" : 标记
{
path: '/home/:id',
component: home
}
在path⾥里里显式声明后，通过params传参后，参数不丢失同时参数被设置成必传参数
接收路由的参数:
<template>
<div>
this is home
<h1>{{$route.params.id}}</h1>
<router-view></router-view>
</div>
</template><script>
export default { }
</script>
4.路由导航守卫(在main.js里面配置)
通过router中的beforeEach注册全局守卫，每次切换路路由时触发
// to, from是路路由对象，我们在路路由⾥里里定义的参数都可以在这⾥里里取到，例例如to.path或 from.name main.js文件里面
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = falseVue.use(ElementUI)
//路由守卫
router.beforeEach((to, from, next) => {
console.log(to.path)
next()
})new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
参数
to： 将进⼊入的路路由对象
from： 将离开的路路由对象
next() 确认完成操作，最后一定要调用，不然路路由就不会进行行切换
5.路由的懒加载
形式:
path:'/xxxx'
component: () => import('./views/Home.vue'),
路由懒加载的优点:
1.提高页面的响应速度；
2.避免进入项目后加载全部组件；
3.在路由中的component中设置函数，用import方式进行使用；
