Vue_路由

引言

前端，主要通过 URL中的hash(#号)来实现不同页面之间的切换。----HTTP请求中不会包含hash相关内容， 所有，前端页面跳转主要用 hash实现。（单页面应用程序）

在Vue中使用 vue-router

• 第一步：导入 vue-router 组件类库
• 第二步：使用 组件来导航
• 第三步：使用 组件来显示
• 第四步：使用Vue.extend创建组件
• 第五步：创建路由实例
• 第六步：定义路由规则
• 第七步：挂载到vue实例上

<div id="app">
 <!-- 路由入口 -->
 <router-link to="/bar">Go to Bar</router-link>
  <!-- 路由出口 -->
  <router-view></router-view>
</div>

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。可以从其他文件 import 进来
const Foo = {
    template: '<div>foo</div>' }

// 2. 定义路由 规则
const routes = [
  {
    path: '/foo', component: Foo },
]

// 3. 创建 router 实例，然后传 `routes` 配置