1. VueRouter的两种模式
hash模式:#以及#后面的字符就是hash内容,用window.location.hash读取,可以通过onhashchange监听hash改变。一般在开发中常用
- 特点:hash内容虽然在URL中,但是不被包括在Http请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
history模式:不带#的地址。用window.location.pathname获取,history模式利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化
- 特点:一般一刷新就404了。
history模式URL就要和后端进行一致,所以要改为history也需要后端的配合,否则会报错。
hash模式在每次刷新页面时是只更改“#”后的东西,对后端完全没有影响。history每次刷新会重新向后端请求整个网址,也就是重新请求服务器。如果后端没有及时响应,就会报错404。history的好处是可以进行修改历史记录。不过如果对于项目没有硬性标准要求,我们可以直接使用hash模式开发。
2. VueRouter在vue项目中的简单使用
//*******在vue项目中使用VueRouter************
//1.安装VueRouter
npm install vue-router
//2. 引入VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//3. 创建路由对象,定义路由规则(路由配置)
//例:
export default new VueRouter({
routes:[
{
path:'/',
name:'home',
component:Home,
//重定向
redirect:'/index',
//路由嵌套
children:[
{
path: '/index',
name: 'index',
component: Index,
}
],
// 路由元信息,程序员可以填加任意自定义属性
meta: {}
},
{
path: '/login/:name',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: register
}
]
});
//4. 将路由对象挂在到Vue实例中
import router from './router'
new Vue({
render: h => h(App),
router
}).$mount('#app')
//*************路由跳转******************
//要链接到一个命名路由:
//方法一: 可以给 router-link标签 的 to 属性传值
//例:
<router-link to="/login/小迟">登录</router-link>
//方法二:
//例:
this.$router.push("/register");
//路由匹配到的组件将显示到这里
<router-view></router-view>
//********路由获取参数***************
//只要将VueRouter实例对象挂在到Vue实例对象上,就可以通过this.$route拿到路由对象,只要能拿到路由对象,就可以通过路由对象拿到传递的参数
console.log(this.$route);
vue-router传参
-
vue-router的传值方式:
vue-router 传值 可以通过url传值
url传值又有两种, params 和 query参数传值-
params传值 是指的动态路由传值
this.$route.params.name // 取值 专门获取路由规则中path: ‘/login/:name’,这种params参数 -
query传值 指通过?后面的拼接参数传值
this.$route.query.id // 取值 获取 ?后面的参数 query参数 查询字符
路由跳转携带参数:
this.$router.push({ path:'/xxx', name: 'xxxPage', // 对映路由配置页面的组件name,使用params字段时必须使用该字段,否则取不出来 query: { id: '123' }, params: { name: '小迟' } }) // 新页面参数获取: // this.$route.params.name '小迟' // this.$route.query.id '123'
-
3. 路由导航守卫
简单样例
const router = new VueRouter({
routes:[
{
path: '/register',
name: 'register',
component: register,
beforeEnter: (to, from, next) => {
// 单个路由独享的导航守卫
}
}
]
})
router.beforeEach((to, from) => {
// 全局导航守卫
})
...
// register组件
const register = {
template: `...`,
beforeRouteEnter(to, from) {
// 组件内的导航守卫,通过路由规则
},
...
}
参数解析:
-
to:目标路由对象;
-
from:即将要离开的路由对象;
-
next:
next参数详解:
- next(): 进行管道中的下一个钩子函数。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
- next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
- next(error): 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
-
当在一个组件中点击切换路由时的执行顺序:beforeRouterLeave–>beforeEach–>beforeEnter–>beforeRouteEnter–>beforeResolve–>afterEach–>vue组件生命周期 beforeCreate–>created–>beforeMount–>mounted–>beforeRouteEnter的next的回调
-
简单应用:使用全局前置守卫判断用户是否登录,如果没登陆跳转到登录页面,如果登陆了就可以跳转到目标界面