基于vue-cli的vue项目之路由6--重定向2-----页面初始化重定向
2017-09-06 10:36
821 查看
既然使用重定向可以让我们路由被选中的时候重定向到另一个页面,那么我们怎么让进来的时候初始化到其中一个路由呢?,
效果是这样的:
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) })
效果是这样的:
相关文章推荐
- 基于vue-cli的vue项目之路由6--重定向4-----path带参重定向
- 基于vue-cli的vue项目之路由6--重定向1-----路径无参重定向
- 基于vue-cli的vue项目之路由6--重定向1-----path无参重定向
- 基于vue-cli的vue项目之路由6--重定向3-----method返回重定向路径
- 基于vue-cli的vue项目之路由2--param传参
- 基于vue-cli的vue项目之路由5--router.push,go,replace方法
- 基于vue-cli的vue项目之路由3--watch监听路由
- 基于vue-cli的vue项目之路由4--嵌套路由
- 基于vue-cli的vue项目之路由1--最基本的使用
- Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理
- Vue 2.0 页面刚启动时如何做路由的重定向?
- 基于 vue-cli 的 Vue js 单页应用项目模板
- 齿科服务项目–前端vue-cli 多页面架构配置
- 基于vue-cli的vue项目之vuex的使用1---------最简单的vuex模板
- vue-cli初始化项目中使用less的方法
- Vue笔记3 vue-cli单页面应用与路由设置
- 让vue-cli初始化后的项目集成支持SSR
- 基于vue-cli网上商城项目实战开发——搭建一个完整的SPA项目开发框架(一)
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 基于vue-cli的vue项目之axios的使用2--最基础的请求