vue-router的使用

最新推荐文章于 2023-11-06 19:46:50 发布

流川962

最新推荐文章于 2023-11-06 19:46:50 发布

阅读量106

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56769697/article/details/130713031

版权

vue-router的使用

步骤（五部）：

1、引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法)
2、创建路由实例：new VueRouter
3、创建映射关系 routes，其实一个路由数组
4、将路由实例挂载到Vue实例上，
5、预留展示区域：router-view

  <!-- 1、引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法） -->
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<body>
<div>
  <!-- 5、预留展示区域 -->
  <router-view></router-view>
</div>
  <template id="index">
  <div>首页</div>
  </template>
<script>
  let index = {
  template: "#index",
};
// 2、创建路由实例
const router = new VueRouter({
  // 3、创建映射关系
  routes: [
    {
      path: "/index",
      component: index,
    },
  ],
});
const vm = new Vue({
  // 4、将路由实例挂载到Vue实例上，
  // router:router,
  router,
  el: "#app",
  data: {},
  methods: {},
  created() {},
});
</script>
</body>