vue系列之路由

2016-12-27

摘要：Vue.js + vue-router的简单使用

路由示例

<router-link>用来导航，其to属性指定链接。<router-view>显示匹配到的组件，并且相应激活的<router-link>会添加“router-link-active“类名。还可以给路由设置404页面或重定向。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
  .router-link-active{
    color: red;
  }
</style>
</head>
<body>
  <div id="app">
    <p>
      <router-link to="/home">我是主页</router-link>
      <router-link to="/chapter1">第一章</router-link>
      <router-link to="/chapter2">第二章</router-link>
    </p>
    <router-view></router-view>
  </div>
  <script>
    // 1. 定义（路由）组件,可以从其他文件 import 进来
    const Home = { 
      template: '<div>主页内容</div>' 
    };
    const Chapter1 = { 
      template: '<div>第一章</div>' 
    };
    const Chapter2 = { 
      template: '<div>第二章</div>' 
    };
    const NotFoundComponent = { 
      template: '<div>404</div>' 
    };

    // 2. 定义路由
    const routes = [
      // 重定向到home页
      { 
        path: '/', 
        redirect: '/home' 
      },
      { 
        path: '/home',
        component: Home 
      },
      { 
        path: '/chapter1', 
        component: Chapter1 
      },
      { 
        path: '/chapter2', 
        component: Chapter2 
      },
      // 覆盖所有的路由情况,如若之前都没有匹配到就跳到 404 页面
      {
        path: '*', 
        component: NotFoundComponent 
      }
    ];

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
      routes // （缩写）相当于 routes: routes
    });

    // 4. 创建和挂载根实例。
    const app = new Vue({
      router
    }).$mount('#app');
  </script>
</body>
</html>

嵌套路由

嵌套路由要注意：
1.以/开头的嵌套路径会被当作根路径
2.子路由的组件内容会在父组件的<router-view>处渲染
3.可以提供一个空的子路由默认渲染
4.可以多层嵌套
对上一个示例进行部分改动：

// 修改Chapter1，添加嵌套路由，注意路径
const Chapter1 = { 
  template: `
    <div>
      <h3>第一章</h3>
      <ul>
        <li><router-link to="/chapter1/section1">第一节</router-link></li>
        <li><router-link to="/chapter1/section2">第二节</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  ` 
};
// 添加几个模版组件
const Section = { template: '<div>第一章介绍：这是第一章</div>' };
const Section1 = { 
  template: `
    <div>
      <h4>第一章第一节</h4>
      <ul>
        <li><router-link to="/chapter1/section1/paragraph1">第一段</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  ` 
};
const Paragraph1 = { template: '<div>第一章第一节第一段</div>' };
const Section2 = { template: '<div><h4>第一章第二节</h4></div>' };
// 修改路由chapter1的配置,其他不变
const routes = [
  { ... },
  { path: '/chapter1',
    component: Chapter1,
    children: [ // 配置子路由
      {
        path: '', // 空的子路由，默认渲染
        component: Section
      },
      {
        path: 'section1',
        component: Section1,
        children: [ // 多级嵌套，都是一样的套路
          {
            path: 'paragraph1',
            component: Paragraph1
          }
        ]
      },
      {
        path: 'section2',
        component: Section2
      }
    ]
  { ... },
];

完整代码：

const Home = { template: '<div>主页内容：本书序</div>' };
const Chapter1 = {
  template: `
    <div>
      <h3>第一章</h3>
      <ul>
        <li><router-link to="/chapter1/section1">第一节</router-link></li>
        <li><router-link to="/chapter1/section2">第二节</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  `
};
const Chapter2 = {
  template: '<div>第二章</div>'
};
const NotFoundComponent = {
  template: '<div>404</div>'
};
const Section = {
  template: '<div>第一章介绍：这是第一章</div>'
};
const Section1 = {
  template: `
    <div>
      <h4>第一章第一节</h4>
      <ul>
        <li><router-link to="/chapter1/section1/paragraph1">第一段</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  `
};
const Paragraph1 = {
  template: '<div>第一章第一节第一段</div>'
};
const Section2 = {
  template: '<div><h4>第一章第二节</h4></div>'
};
const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/chapter1',
    component: Chapter1,
    children: [ // 配置子路由
      {
        path: '', // 空的子路由，默认渲染
        component: Section
      },
      {
        path: 'section1',
        component: Section1,
        children: [ // 多级嵌套，都是一样的套路
          {
            path: 'paragraph1',
            component: Paragraph1
          }
        ]
      },
      {
        path: 'section2',
        component: Section2
      }
    ]
  },
  {
    path: '/chapter2',
    component: Chapter2
  },
  {
    path: '*',
    component: NotFoundComponent
  }
];
const router = new VueRouter({
  routes
});
const app = new Vue({
  router
}).$mount('#app');

动态路由匹配

动态路由匹配的参数值会被设置到this.$route.params，而且路由渲染的是同个组件即复用同一个组件，因而组件的生命周期钩子不会再被调用

// 修改Chapter2
const Chapter2 = {
  template: `
    <div>
      <h3>作者信息</h3>
      <ul>
        <li><router-link to="/chapter2/xiaowang/age/23">xiaowang</router-link></li>
        <li><router-link to="/chapter2/dagang/age/33">dagang</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  `
};
// 添加作者信息模版组件
const Author = {
  template: '<div>{{$route.params}}</div>'
};
// 修改路由chapter2的配置,其他不变
const routes = [
  { ... },
  {
    path: '/chapter2',
    component: Chapter2,
    children: [
      { path: ':authorname/age/:age', component: Author }
    ]
  },
  { ... }
];

完整代码：

const Home = {
  template: '<div>主页内容：本书序</div>'
};
const Chapter1 = {
  template: `
    <div>
      <h3>第一章</h3>
      <ul>
        <li><router-link to="/chapter1/section1">第一节</router-link></li>
        <li><router-link to="/chapter1/section2">第二节</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  `
};
const Chapter2 = {
  template: `
    <div>
      <h3>作者信息</h3>
      <ul>
        <li><router-link to="/chapter2/xiaowang/age/23">xiaowang</router-link></li>
        <li><router-link to="/chapter2/dagang/age/33">dagang</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  `
};
const Author = {
  template: '<div>{{$route.params}}</div>'
};
const NotFoundComponent = {
  template: '<div>404</div>'
};
const Section = {
  template: '<div>第一章介绍：这是第一章</div>'
};
const Section1 = {
  template: `
    <div>
      <h4>第一章第一节</h4>
      <ul>
        <li><router-link to="/chapter1/section1/paragraph1">第一段</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  `
};
const Paragraph1 = {
  template: '<div>第一章第一节第一段</div>'
};
const Section2 = {
  template: '<div><h4>第一章第二节</h4></div>'
};
const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/chapter1',
    component: Chapter1,
    children: [
      {
        path: '',
        component: Section
      },
      {
        path: 'section1',
        component: Section1,
        children: [
          {
            path: 'paragraph1',
            component: Paragraph1
          }
        ]
      },
      {
        path: 'section2',
        component: Section2
      }
    ]
  },
  {
    path: '/chapter2',
    component: Chapter2,
    children: [
      { // 动态路径参数 以冒号开头
        path: ':authorname/age/:age',
        component: Author
      }
    ]
  },
  {
    path: '*',
    component: NotFoundComponent
  }
];
const router = new VueRouter({
  routes
});
const app = new Vue({
  router
}).$mount('#app');