rom default cnblogs local .cn images com 头部
- import vue from'vue'import Router from'vue - router'
- /*
- import Select from '@/components/Select'
- import Point from '@/components/Point'
- import Author from '@/components/Author' */
- Vue.use(Router) const Home = resolve = >require(['.. / Home'], resolve) const Select = resolve = >require(['.. / components / Select'], resolve) const Point = resolve = >require(['.. / components / Point'], resolve) const Author = resolve = >require(['.. / components / Author'], resolve) const News = resolve = >require(['.. / components / Article'], resolve) export
- default new Router({
- linkActiveClass:
- 'active',
- // 路由配置
- routes: [{
- path: ' / ',
- redirect: ' / select'
- },
- {
- path: ' / ',
- component: Home,
- children: [{
- path: 'select',
- component: Select
- },
- {
- path: 'point',
- component: Point
- },
- {
- path: 'author',
- component: Author
- }]
- },
- {
- path: ' / news / :id',
- component: News
- }]
- })
访问 localhost:8080 的时候
首先想到的是访问 Home 组件
Home 组件又有嵌套的 router-view 加上路径'/'的重定向,所以会显示嵌套的组件 select
App.vue
- "app">class="page">
- //头部永远不会变所以放在router外面
- // 一级的router-view
- import MenuMobile from '@/components/Menu'
- import HeadMobile from '@/components/Head'
- export default {
- name: 'app',
- components: {
- MenuMobile,
- HeadMobile
- }
- }
- .page {
- position: relative;
- z-index:99;
- transition: all 0.5s;
- }
- .toggle {
- transform: translateX(-120px);
- }
Home.vue
- import MenuMobile from '@/components/Menu'
- import NavMobile from '@/components/Nav'
- import FootMobile from '@/components/Foot'
- export default {
- name: 'app',
- components: {
- MenuMobile,
- NavMobile,
- FootMobile
- }
- }
- .page{
- position: relative;
- z-index:99;
- transition: all 0.5s;
- }
- .toggle{
- transform: translateX(-120px);
- }
当我点击 select 组件的文章列表时
<router-link :to="news/id">
会将路径设置为 http://localhost:8080/#/news/11
11 为假设的 id 值
这个时候路由就会去找'/news/:id'有了之后就会显示到一级的 <router-view> 上
这个时候之后头部是不变的下面所以的内容就会变成新闻页
vue-router 学习
来源: http://www.bubuko.com/infodetail-2032924.html