基于vue-cli的vue项目之路由6--重定向3-----method返回重定向路径
设置重定向,肯定是不能写死的,那么应该怎么写“活的”?
1.hello.vue子界面:用来显示的子界面
<template>
<div class="hello">
<h1>这个是hello.vue页面</h1>
<h2></h2>
</div>
</template>
<script>
export default {
name: "hello",
}
</script>
2.router/index.js:路由配置文件,关键在于第二十七到第三十四行
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{
path: "/hello",
component: require("../components/Hello.vue"),
},
{
path: "/foo",
component: require("../components/foo.vue"),
},
{
path: "*",
redirect: to => {
const {hash,params,query} = to
if(1) { return {path: "/foo",}}
else {return "/hello"}
}
}
]
})
export default router;
3.app.vue:主界面
<template>
<div id="app">
<!-- <hello></hello> -->
<div class="nav">
<ul>
<li>
<router-link to="/hello">hello页面</router-link>
</li>
<li>
<router-link to="/foo">foo页面</router-link>
</li>
</ul>
</div>
<div class="main">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "app",
components: {},
}
</script>
<style>
body {background-color: #f8f8ff;font-family: "Avenir", Helvetica, Arial, sans-serif;color: #2c3e50;}
.nav {position: fixed;width: 108px;left: 40px;}
.nav ul {list-style: none;margin: 0;padding: 0;}
.nav ul li {width: 108px;height: 48px;line-height: 48px;border: 1px solid #dadada;text-align: center; }
.nav ul li a {display: block;position: relative;text-decoration: none;}
.nav ul li img {position: absolute; left: 0;top: 0; width: 100px;height: 30px;}
.main { height: 400px;margin-left: 180px;margin-right: 25px;}
</style>
main.js:配置路由路径
import Vue from "vue"
import App from "./App"
import VueRouter from "vue-router"
import router from "./router"
Vue.use(VueRouter);
new Vue({
el: "#app",
router,
render: h => h(App)
})
效果如下:
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
- 上一篇: mui webapp本地存储
- 下一篇: vue如何导入外部js文件(es6)
