Vue-脚手架中router（路由）的基本用法

在谈路由之前的的确保了解Vue组件以及脚手架。
在谈路由之前先简单介绍一下脚手架的安装。因为使用路由的用脚手架

npm install -g @vue/cli

当然npm是国外的安装比较慢，这可以采用淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后就可以采用淘宝镜像安装了

cnpm i -g @vue/cli

查看版本

 vue -V

之后创建一个案例

vue create demo1

运行

  npm run serve

具体如何使用请看 Vue脚手架
下面开始介绍路由
一、安装
在用使用之前需要安装 这里采用淘宝镜像安装

cnpm install vue-router

安装之后在main.js中使用

   // 引用
import vueRouter from 'vue-router'
   //使用
Vue.use(vueRouter)
   //创建实例 可以在vue实例内部创建也可以在外部创建   这里在外部创建 
   let router = new vueRouter({
  routes: [
    {
      path: '/',
      component: home
    },
    {
      path: '/a',
      component: AAA
    },
    {
      path: '/b/:id/:age',
      props: true,
      component: BBB
    }
  ]
})

   //在vue实例中引入
  new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

到这里router实例已经创建好了 但是还缺少一个出口
一般都是把出口放在App.vue中

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

如果你的页面需要跳转 则需要用到路由的另一个指令。 <router-link> 这是一个默认是一个a标签 可以用一个tag标签给他转
也可以给使用事件传 用this.$router.push("/zzzz")

 <router-link to="/a" tag="span">第二页</router-link>

当然路由也是可以传参的 比如新闻网中新闻 当点击不同的标题会调到不同详情页面。这一般是传参，但我这里仅仅针对vue
传参有两种形式：

     //一种是字符串拼接
 <router-link to="'/a?id='+20" tag="span">第二页</router-link>     //20一般是v-for循环出来的id
   //对一个的接收参数方法：query
 created() {
 this.$route.query.id
},
//当然也可以直接在页面使用
    <div>
我是第二页
{{$route.query.id}}
    </div>
  //第二种是接口后面不跟问号的
  <router-link to="/b/40/50" tag="span">第三页</router-link> 
  //这种需要在router中更改path
let router = new vueRouter({
  routes: [
    {
      path: '/b/:id/:age',
      props: true,
      component: BBB
    }
  ]
}) 
 //对应的接受方法是params
     <div>
我是第三页
{{$route.params.id}}
{{age}}
    </div>
    //如果想用props接收 就在router中写    props: true,
    //然后在对应的页面中使用即可
props:['id','age']

想要详细了解 请看vue-router