1.main.js:
import Vue from 'vue'
import {Button} from 'mint-ui'
import App from './App.vue'
import router from './router'
// 注册全局组件
Vue.component(Button.name, Button)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: {
App
},
template: '<App/>', // 将<App/>渲染到页面的el元素中
router // 注册路由器:
})
/*
1个函数:
VueRoute: 路由构建函数, 用于创建路由器对象, 配置路由
2个对象
$route: 代表当前路由的对象, 包含当前路由相关信息(path, params参数, query参数)
$router: 代表路由器对象, 包含控制路由跳转的方法(push/replce/back())
3个标签
<router-link>: 路由链接, 生成路由链接
<router-view>: 路由视图, 显示当前路由组件
<keep-alive>: 缓存路由组件对象
*/
2.router.js
/*
路由器对象模块
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import MessageDetail from '../pages/MessageDetail.vue'
Vue.use(VueRouter)
export default new VueRouter({
//默认模式为hash,可以转换为history模式,当为history模式时,访问路径不加 #
//history模式:存在问题,本地可以正常使用,但是打包后,无法访问静态资源, 会出现报错404
mode:'history',
// 配置应用中所有的路由
routes: [
// 路由
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: '/home/news', // 路径左侧的/代表根路径
component: News
},
{
path: 'message',
component: Message,
children: [
{
path: '/home/message/detail/:id',
component: MessageDetail
},
]
},
{
path: '',
redirect: '/home/news'
}
]
},
// 自动跳转的路由
{
path: '/',
redirect: '/about'
}
]
})
// 定义全局前置守卫
/*
to: 目标路由对象
from: 当前路由对象
next: 用来控制路由跳转函数
*/
router.beforeEach((to, from, next) => {
console.log('global beforeEach', to, from)
// 当用户请求的是/b或/a时, 如果没有登陆, 自动跳转到/login
if(to.path==='/a' || to.path==='/b') {
if(!Vue.store.state.user._id) {
return next('/login')
}
}
// 放行
next()
})
3.页面使用–01****
<template>
<div>
<h2>Home</h2>
<div>
<ul class="nav nav-tabs">
<li><router-link to="/home/news">News</router-link></li>
<li><router-link to="/home/message">Message</router-link></li>
</ul>
<hr>
<div>
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
</style>
3.页面使用–02****
<template>
<div>
<ul>
<li v-for="(m, index) in messages" :key="index">
<router-link :to="`/home/message/detail/${m.id}?xxx=123`">{{m.title}}</router-link>
<button @click="pushShow(m.id)">push查看</button>
<button @click="replaceShow(m.id)">replace查看</button>
</li>
</ul>
<button @click="$router.back()">返回</button>
<hr>
<router-view/>
</div>
</template>
<script>
export default {
data() {
return {
messages: []
}
},
mounted () {
// 模拟从后台获取数据
setTimeout(() => {
const messages = [
{id: 1, title: 'message001'},
{id: 3, title: 'message003'},
{id: 5, title: 'message005'}
]
// 更新数据
this.messages = messages
}, 1000)
},
methods: {
pushShow (id) {
// console.log(this.$router)
this.$router.push(`/home/message/detail/${id}`)
},
replaceShow (id) {
this.$router.replace(`/home/message/detail/${id}`)
}
}
}
</script>
<style>
</style>