Open chenshenhai opened 8 years ago
更多vue-router的官方API使用 https://github.com/vuejs/vue-router/tree/dev/docs/zh-cn 本博客demo源码 https://github.com/ChenShenhai/vue-dev-demo/tree/master/demo-router 1. 搭建好webpack的开发环境
更多vue-router的官方API使用 https://github.com/vuejs/vue-router/tree/dev/docs/zh-cn
本博客demo源码 https://github.com/ChenShenhai/vue-dev-demo/tree/master/demo-router
具体可参考 github.com/ChenShenhai/blog/issues/2
npm install --save-dev vue-router
import Vue from 'vue' import VueRouter from 'vue-router' import { configRouter } from './router' //加载路由中间件 Vue.use(VueRouter) //定义路由 const router = new VueRouter(); //配置路由参数 configRouter(router) //加载路由应用 const App = Vue.extend(require('./app.vue')) //路由挂载到dom上 router.start(App, '#app');
//路由配置 export function configRouter (router) { //普通页面 router.map({ '/about': { component: require('./page/about.vue') }, //子页面路由设置subRoutes '/user/:userId': { component: require('./page/user/index.vue'), subRoutes: { 'profile/:something': { component: require('./page/user/profile.vue') }, } }, //404页面 '*': { component: require('./page/404.vue') }, }) //路由重定向 router.redirect({ '/info': '/about', '/my/:userId': '/user/:userId' }) }
<style> .view { transition: all .5s ease; } .view-content-enter, .view-content-leave { opacity: 0; transform: translate3d(10px, 0, 0); } .v-link-active { color: red; } [v-cloak] { display: none; } </style> <template> <div> <a v-link="{ path: '/about' }">/about</a><br/> <a v-link="{ path: '/user/1234' }">/user/1234</a> <br/> <a v-link="{ path: '/user/1234/profile/my_params' }">/user/1234/profile/my_params</a> <br/> <p>重定向</p> <a v-link="{ path: '/info' }">/info</a><br/> <a v-link="{ path: '/my/1234' }">/my/1234</a> <br/> <router-view class="view" transition="view-content" transition-mode="out-in" keep-alive></router-view> </div> </template> <script> </script>
<template> <div> <h2>ABOUT PAGE...</h2> <p>hello world! this is the page about me</p> </div> </template>
<template> <p>404 NOT FOUNT o(╯□╰)o</p> </template>
<template> <div> <h2>USER PAGE</h2> <p>the userId is {{$route.params.userId}}</p> <router-view></router-view> </div> </template>
<template> <div> <h3>USER PAGE - Profile View</h3> <p>{{$route.params.userId}} {{$route.params.something}}</p> </div> </template>
demo源码 https://github.com/ChenShenhai/vue-dev-demo/tree/master/demo-router
vue.js组件化开发(1)单页面应用路由
具体可参考 github.com/ChenShenhai/blog/issues/2
2. 加载路由开发依赖
3. 单页面组件开发
3.1 配置主文件 src/main.js
3.2 配置路由 src/router.js
3.3 单页面主应用文件 src/app.vue
3.4 单页面应用的各个页面组件
src/page/about.vue
src/page/404.vue
src/page/user/index.vue
src/page/user/profile
demo源码 https://github.com/ChenShenhai/vue-dev-demo/tree/master/demo-router