code1 Vue-Router

一. 通过Vue CLI 快速创建一个项目

1. vue create router-demo1 在终端中执行指令
2. 选择手动设置，安装Router
3. 一直回车下去，直至项目创建完成

二. 清理项目里的一些东西

三. 简单静态路由
1. 先在 components 文件夹下创建 A-router.vue 和 B-router.vue两个组件，组件内容如下：

// A-router.vue
<template>
  <div class="a-router">
    这是路由页面 A ,现在是最简单的路由跳转
  </div>
</template>

2. 在 router/index.js中定义路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Arouter from '../components/A-router.vue' // 1. 引入路由组件
import Brouter from '../components/B-router.vue' 

Vue.use(VueRouter)

const routes = [
  { // 2. 定义路由
    name: 'router-a',  //定义路由的名字
    path: '/a',               // 指定路由路径
    component: Arouter   // 要跳转的组件
  },
  {
    name: 'router-b',
    path: '/b',
    component: Brouter
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3. 在 main.js 中注入路由

import Vue from 'vue'
import App from './App.vue'
import router from './router' //导入 router,一般都是默认导好的
Vue.config.productionTip = false

new Vue({
  router, // 通过 router 配置参数注入路由，从而让整个应用都有路由功能，一般也是不需要自己配置的
  render: h => h(App)
}).$mount('#app')

4. 在 App.vue中使用路由

<template>
  <div id="app">
    <h1>Vue Router</h1>
    <!-- 1. 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/a">Router-A</router-link>
    <router-link to="/b">Router-B</router-link>
    <hr>
    <!-- 2. 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#app {
  padding: 30px;
}

#app a {
  font-weight: bold;
  color: #2c3e50;
  padding: 10px;
}

#app a.router-link-exact-active {
  color: #42b983;
}
</style>

5. 此时，一个简单的静态路由就配置好了

6. 动态路由匹配

// router/index.js 文件
添加路由C
{
    name: 'router-c',
    path:'/c/:id', //动态路径参数 以冒号开头，当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用
    component:Crouter
  }

// App.vue 文件
<router-link :to="{name:'router-c',params:{id:123}}">Router-C</router-link>

// C-router.vue
<div>$route.params.id-->{{$route.params.id}}</div>