vue.js 重定向 和 404 等等相关的问题?
- 进入后就是默认 /
- 重定向
{path:'/',redirect:'home'}
- 重定向
{path:'/',redirect:{name:'home'}}
【采用对象的方式:一劳永逸】- 所谓404: 指在路由规则的最后的一个规则
- 写上一个很强大的匹配规则
-{path:'*',component:notFoundVue}
相关文件代码:
1. main.js文件:
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体(页面初始化显示)
import App from './components/app.vue';
//一个个link对象 - 分类
import NotFound from './components/notFound.vue';
import Home from './components/home.vue';
//安装插件
Vue.use(VueRouter);//挂载属性
//创建路由对象并配置路由规则
/*let router = new VueRouter({
//routes
routes: [
//一个个link对象
{name: 'music',path: '/music_country',component: Music},
{name: 'movie',path: '/movie',component: Movie}
]
});
*/
//和上述注释代码相同
let router = new VueRouter();
router.addRoutes([
//重定向
/*方法一
* {path:'/',redirect:'/home'},
{path:'/home',component:Home}*/
//方法二:一劳永逸
{path:'/',redirect:{name:'home'}},
{name:'home',path:'/home',component:Home},
//404:最终无法匹配-->404
{path:'*',component:NotFound}
])
//new Vue 启动 :构建vue实例
new Vue({
el: '#app',
render: c => c(App),
//让vue知道我们的路由规则
router:router,//可以简写为router
})
2. app.vue文件:
<template>
<div>
<div class="header">
头部 - 导航栏目
</div>
<!--留坑,非常重要-->
<router-view class="main"></router-view>
<div class="footer">底部 - 版权信息</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
.header,.main,.footer{text-align: center;padding: 10px;}
.header{height:70px;background: yellowgreen;}
.main{height:300px;background: skyblue;}
.footer{height: 100px;background: hotpink;}
</style>
3. home.vue文件
<template>
<div>
我是首页
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
goback(){
this.$router.go(-1);
}
}
}
</script>
<style scoped>
div{font-size: 30px;}
</style>
4. notFound.vue文件:
<template>
<div>
您要访问的页面出去旅游去了...
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
</style>
以上就是“vue.js 重定向 和 404 等等相关的问题”的简单讲述,可以作为demo演示,了解一下。