基于vue-cli的vue项目之路由6--重定向2-----页面初始化重定向

既然使用重定向可以让我们路由被选中的时候重定向到另一个页面，那么我们怎么让进来的时候初始化到其中一个路由呢？，

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:"/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)})

效果是这样的：