Vue Router 简单例子

时间 2019-11-21

标签 vue router 简单例子繁體版

原文原文链接

一、起步

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

包含的功能有：
（比较晦涩难懂，随着慢慢熟悉vue，再回来细细品读）html

嵌套的路由/视图表

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于 Vue.js 过渡系统的视图过渡效果

细粒度的导航控制

带有自动激活的 CSS class 的连接

HTML5 历史模式或 hash 模式，在 IE9 中自动降级

自定义的滚动条行为

二、实例

如下代码直接新建一个html，复制黏贴便可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <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>
</head>
<body>
<div id="app">
  <h1>Hello sz!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 经过传入 `to` 属性指定连接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <br/><br/>路由匹配到的组件将渲染在这里下面
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
</body>
<script>
  // 0. 若是使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

  // 1. 定义 (路由) 组件。
  // 能够从其余文件 import 进来
  const Foo = { template: '<div>foo</div>' }
  const Bar = { template: '<div>bar</div>' }

  // 2. 定义路由
  // 每一个路由应该映射一个组件。 其中"component" 能够是
  // 经过 Vue.extend() 建立的组件构造器，
  // 或者，只是一个组件配置对象。
  // 咱们晚点再讨论嵌套路由。
  const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]

  // 3. 建立 router 实例，而后传 `routes` 配置
  // 你还能够传别的配置参数, 不过先这么简单着吧。
  const router = new VueRouter({
    //routes // (缩写) 至关于 routes: routes
    routes: routes
  })

  // 4. 建立和挂载根实例。
  // 记得要经过 router 配置参数注入路由，
  // 从而让整个应用都有路由功能
  const app = new Vue({
    router
  }).$mount('#app')

  // 如今，应用已经启动了！

// 扩展
// 经过 this.$router 访问路由器   this.$route.params.username
// 也能够经过 this.$route 访问当前路由  this.$router.push('/')

</script> 
</html>