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

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

1. 进入后就是默认 /
2. 重定向 {path:'/',redirect:'home'}
3. 重定向 {path:'/',redirect:{name:'home'}}【采用对象的方式：一劳永逸】
4. 所谓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演示，了解一下。