Router:路由初始

1.路由配置

//Router定义路由
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]


const router = new VueRouter({
      routes // routes: routes 的简写
})


//把router 实例注入到 vue 根实例
new Vue({
 // el: '#app',
  router,
  components: { App },
  template: '<App/>'//#Vue实例使用template字段声明了一个模板，其模板即为<App/><App>（我猜：该字段是用于生成的js文件的，js文件实质上是用该模板替换了index.html下的<div id="App">）
}).$mount("#app")

执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home}  path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现才是基于hash 实现的。

2.路由的跳转和参数接收

<router-link to="/a">跳转</router-link>

<router-link :to="{id:111}">跳转</router-link>

<div @click="goto">跳转</div>

<router-link to="/a/222">跳转</router-link>


methods:{
    goto(){
      //如果不加this，系统会默认你想引用的是一个全局变量，可是这里我们需要引用的是这个vue实例里的局部变量
      this.$router.push("/a");//this.$router.push("/a/555");//this.$route.params.id
    }
  }


//参数的接收：
<script>
  export default {
    name: "ComponentA",
    data() {
      return {
        msg: '这是组件A',
      }
    },
    computed: {
      id () {
        return this.$route.params.id
      }
    },
    watch: {
      $route(to, from) {
        // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对象，你可以把它打印出来，它们也有一个param 属性
        console.log(to);
        console.log(from);
        console.log(to.params.id)
        this.id = to.params.id
      }
    },
    // props: ['id'],  computed和props各选一种
    mounted() {
      console.log(this.id);
      console.log(this.$route.params.id);
    }
  }
</script>

3.App.vue

在 App.vue中，定义<router-link > 和 </router-view>，在vue-router中, 我们看到它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去， 如：<router-link  to="/home">Home</router-link>

参考来源：https://blog.csdn.net/qq_31967569/article/details/91546294