首先:
要清楚的是:vue中都是单页面应用(SPA)居多,而所谓的页面跳转,也是通过history 或 hash 的方式找到对应的路由地址后,再进行重新渲染页面视图(可以测试一下,在window对象上挂载一个自定义属性,只要不刷新页面的话【当然也可以存放到本地存储如:cookie、storage之中】,然后不管在哪个页面 或 组件中都可以访问到该自定义属性,而这样就和vuex的效果就是类似啦),而不是真正的页面跳转。
一、标签跳转:<router-link> 映射路由:
1、不带参数跳转
<!-- home页面(首页) -->
<template>
<!-- 在Vue中的<router-link>标签中,到页面最终还是转为<a>标签 -->
<router-link to="/about">
<button>打开关于我们 - 不带参数1</button>
</router-link>
<router-link :to="{path: '/about'}">
<button>打开关于我们 - 不带参数2</button>
</router-link>
</template>
2、带参数跳转
<!-- home页面(首页) -->
<template>
<router-link :to="{path: '/about', query: {id: 1024, name:'mupiao', age: 28 }}">
<button>打开关于我们 - 带参数1</button>
</router-link>
<router-link :to="{name: 'About', params: {id: 1024, name:'mupiao', age: 28 }}">
<button>打开关于我们 - 带参数2</button>
</router-link>
</template>
3、接收参数
// About页面(关于我们)
<template>
<section>关于我们</section>
</template>
<script>
export default {
name: "About",
data() {
return {};
},
created() {
// 在Vue实例被创建之后的钩子函数中,接收home页面传过来的参数
// 以query方式接收参数:【query传递数据是通过URL传递的,类似ajax中的get方式】
console.log(this.$route.query.id); // 1014
console.log(this.$route.query.name); // mupiao
console.log(this.$route.query.age); // 28
// 以params方式接收参数:【params方式,类似ajax中的post方式】
console.log(this.$route.params.id); // 1014
console.log(this.$route.params.name); // mupiao
console.log(this.$route.params.age); // 28
}
}
</script>
Vue常用路由配置规则:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
// 抽离出在这个路由配置表中共用的页面视图,以方便多处使用
const Login = () => import(/* webpackChunkName: "Login" */ '../views/Login.vue');
const News = () => import(/* webpackChunkName: "News" */ '../views/News.vue');
const NotFound = () => import(/* webpackChunkName: "NotFound" */ '../views/NotFound.vue');
Vue.use(VueRouter);
const routes = [
{
path: '/', // 网站首页
name: 'Home',
component: () => import('../views/Home.vue')
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/regist',
name: 'Regist',
component: () => import('../views/Regist.vue')
},
{
path: '/main',
name: 'Main',
meta: {
userauth: true // 开启用户鉴权(用户需登录后,才能访问)
},
component: Main,
children: [ // 子路由
{
path: '/news/:id(\\d+)',
name: 'News',
meta: {
userauth: true
},
component: News,
children: [ // 第三级子路由
{
path: '/main/news/alert',
name: 'Alert',
component: () => import('../views/Alert.vue')
},
{
path: '/card/:listId(\\d+)/list/:listId(\\d+)',
name: 'Card',
component: () => import('../views/Card.vue')
}
]
},
{
path: '/info/:id(\\d+)',
name: 'Info',
meta: {
userauth: true
},
component: () => import(/* webpackChunkName: "Info" */ '../views/Info.vue')
},
{
path: '/send',
name: 'Send',
meta: {
userauth: true
},
component: () => import('../views/Send.vue')
},
// 默认显示的子路由
{
path: '',
name: 'News',
component: News
}
],
},
{
path: '/about',
name: 'About',
meta: {
userauth: true
},
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/notfound',
name: 'NotFound',
component: NotFound
},
// 如果找不到对应的路由(页面)就显示404页面
{
path: '*',
name: 'NotFound',
component: NotFound
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
router.beforeEach((to, from, next) => {
// 在进入路由前,判断到该路由需要鉴权(用户登录)则验证用户信息(!Store.state.user.userinfo 没有用户信息),不通过则跳转到登录页。
if (to.matched.some(matched => matched.meta.userauth) && !Store.state.user.userinfo) {
next({ name: 'Login' });
} else {
next();
}
});
export default router;
显示子路由视图一定要加上 <router-view></router-view>
// Main主框架页面
<template>
<Layout>
<Header></Header>
<Content>
<!-- 显示子路由视图 -->
<router-view></router-view>
</Content>
<Footer></Footer>
</Layout>
</template>
<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
name: "Main",
components: {
Header,
Footer
},
data() {
return {};
},
mounted() {},
methods: {}
};
</script>
<style lang="scss" scoped>
.ivu-layout {
.ivu-layout-content {
min-height: 88vh;
}
}
</style>
二、编程式路由跳转: this.$router.push()
1、不带参数跳转
<!-- Home页面(首页) -->
<template>
<router-link :to="{path: '/about'}">
<button>打开关于我们</button>
</router-link>
<button @click="open">打开关于我们</button>
</template>
<script>
export default {
name: "Home",
data() {
return {};
},
methods: {
open() {
this.$router.push('/about');
}
},
}
</script>
2、带参数跳转
<!-- Home页面(首页) -->
<template>
<router-link :to="{path: '/about'}">
<button>打开关于我们</button>
</router-link>
<button @click="open1">打开关于我们 - query方式</button>
<button @click="open2">打开关于我们 - params方式</button>
</template>
<script>
export default {
name: "Home",
data() {
return {};
},
methods: {
// query方式
open1() {
this.$router.push({
path: '/about',
query: {
id: 2048,
book: "了不起的Node.js",
job: "Web前端"
}
});
},
//⚠️注:如果要传递的参数很长时,请问params方式,因为query方式是通过URL传递的,而URL传参数长度是有限制的哦!!
// params方式
open2() {
this.$router.push({
name: "About", // ⚠️注:这里不能用path路径,只能用name【请对照router.js中的路由规则中的name项,还有就是一般首字母大写】,否则取不到传过去的数据
params: {
id: 2048,
book: "了不起的Node.js",
job: "Web前端"
}
});
}
},
}
</script>
3、接收参数
// About页面(关于我们)
<template>
<section>关于我们</section>
</template>
<script>
export default {
name: "About",
data() {
return {};
},
created() {
// 在Vue实例被创建之后的钩子函数中,接收home页面传过来的参数
//⚠️注:在传递参数时,用什么方式传参,就用什么方式接收!!
// 以query方式接收参数:【query传递数据是通过URL传递的,类似ajax中的get方式】
console.log(this.$route.query.id); // 2048
console.log(this.$route.query.book); // 了不起的Node.js
console.log(this.$route.query.job); // Web前端
// 以params方式接收参数:【params方式,类似ajax中的post方式】
console.log(this.$route.params.id); // 2048
console.log(this.$route.params.book); // 了不起的Node.js
console.log(this.$route.params.job); // Web前端
// this.$route 路由信息对象
console.log(this.$route); //this.$route 对象中包涵了路由的相关信息,请自看!!
</script>
真正的页面跳转:
一、HTML超链接跳转:<a href="http://www.xxx.com">跳转链接</a>
//打开外部链接
<a target="_blank" href="https://www.baidu.com/s?wd=Vue">百度一下 Vue</a>
二、浏览器BOM中的location.href跳转:
//在当前页面打开URL页面
window.location.href = "https://www.baidu.com/s?wd=Vue";
三、浏览器BOM中的window.open()跳转:
//打开一个新的浏览器窗口
window.open("https://www.baidu.com/s?wd=Vue", "_blank", "width=1000, height=500", true);