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({//routesroutes: [//一个个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演示，了解一下。

vue.js 重定向和 404 等等相关的问题？相关推荐

vue.js解决刷新404找不到页面问题
vue.js解决刷新404找不到页面问题参考文章: (1)vue.js解决刷新404找不到页面问题 (2)https://www.cnblogs.com/Javame/p/11020737.html ...
17. Vue.js重定向
重定向修改index.js 添加一个新的路由 {path:'/home',redirect:'/main'} 修改Profile.vue 在前端使用 <el-menu-item index=& ...
如何进行 Vue.js 框架的安装？
cmd如何进行 Vue.js 框架的安装? 步骤总结: 本地磁盘建立对应的空文件夹:举例:路径如C:\个人\vuejs\secondvue 电脑单击"开始",搜索程序**" ...
[译] State of Vue.js report 2017 中文版
原文链接:https://www.monterail.com/state-of-vuejs-report 译文出自:掘金翻译计划 Event Organizer:leviding Translater ...
State of Vue.js report 2017 中文版
转载自:https://juejin.im/post/5a138fae5188254d28732899 原文链接:www.monterail.com/state-of-vu- 译文出自:掘金翻译计划 ...
vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传内容精选换一换开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
Vue.js 最佳实践清单，照亮你的开发之路
作者简介: 李中凯老师,8年前端开发,前端负责人,擅长JavaScript/Vue. 公众号:1024译站掘金文章专栏:https://juejin.im/user/57c7cb8a0a2b5800 ...
宝塔面板部署nuxt_MacOS下创建及部署vue.js项目（及Nuxt.js、PM2等相关流程）
开发环境权限准备为避免后续流程出现权限不足的相关提示,首先在终端中输入以下代码检查当前系统是否已开启了对系统文件夹的保护: csrutil status 若结果为csrutil enabled,则 ...
Vue.js - 解决部署到服务器后Element UI图标不显示问题（404错误）
1,问题描述 (1)element-ui 自带了一套常用的图标集合,使用起来十分方便.最近发现当 Vue.js 项目中使用 element-ui 图标时,如果使用 npm run dev 方式启动,图 ...

vue.js 重定向和 404 等等相关的问题？

vue.js 重定向和 404 等等相关的问题？

相关文件代码：

1. main.js文件：

2. app.vue文件：

3. home.vue文件

4. notFound.vue文件：

vue.js 重定向和 404 等等相关的问题？相关推荐

最新文章

热门文章

vue.js 重定向 和 404 等等相关的问题？

vue.js 重定向 和 404 等等相关的问题？

相关文件代码：

1. main.js文件：

2. app.vue文件：

3. home.vue文件

4. notFound.vue文件：

vue.js 重定向 和 404 等等相关的问题？相关推荐

最新文章

热门文章

vue.js 重定向和 404 等等相关的问题？

vue.js 重定向和 404 等等相关的问题？

vue.js 重定向和 404 等等相关的问题？相关推荐