Vue和Vue-router路由的引入顺序以及Vue Router的使用步骤_new vuerouter 和new vue 的执行顺序-优快云博客

本文链接：https://blog.youkuaiyun.com/BKayun/article/details/125872064

本文介绍了在开发过程中遇到的一个问题，即Vue.js和VueRouter.js引入顺序错误导致页面无法正常加载。正确做法应为先引入Vue.js，再引入VueRouter.js。文章详细展示了VueRouter的使用步骤，包括创建路由链接、定义路由组件、创建路由实例和在Vue实例中挂载路由。通过调整引入顺序和遵循这些步骤，可以成功解决依赖问题并实现页面的正常路由跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天旁边的同学一直加载不出页面，我一看好像是引入顺序的问题，这样明显是反了。

<script src="../js/vue-router.js"></script>
<script src="../js/vue.js"></script>

Vue Router依赖于Vue，所以需要先引入Vue.js，再引入Vue Router.js，就解决啦！

<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>

Vue Router的使用步骤

1.写上路由链接和路由占位符（之前肯定得引入Vue.js和Vue-router.js）

<ul>
            <li><router-link to="/users">用户管理</router-link></li>
            <li><router-link to="/access">权限管理</router-link></li>
            <li><router-link to="/goods">商品管理</router-link></li>
            <li><router-link to="/orders">订单管理</router-link></li>
            <li><router-link to="/systems">系统设置</router-link></li>
          </ul>
        </div>
        <!-- 右侧内容区域 -->
        <div class="content right">
          <div class="main-content">
          <router-view></router-view>
          </div>
          </div>

2.创建对应的路由组件

const Users = {
    template: `<div>
      <h3>用户管理</h3>
  </div>`}
  const Access = {
    template: `<div>
      <h3>权限管理</h3>
  </div>`}
  const Goods = {
    template: `<div>
      <h3>商品管理</h3>
  </div>`}
  const Orders = {
    template: `<div>
      <h3>订单管理</h3>
  </div>`}
  const Systems = {
    template: `<div>
      <h3>系统管理</h3>
  </div>`}

3.创建路由实例

const myRouter = new VueRouter({
    routes: [{
      path: "/",
      component: app
    },
    {
      path: "/users",
      component: Users
    },
    {
      path: "/access",
      component: Access
    },
    {
      path: "/goods",
      component: Goods
    },
    {
      path: "/orders",
      component: Orders
    },
    {
      path: "/systems",
      component: Systems
    },]
  })

4.Vue()里挂载上路由

let vm = new Vue({
    el: "#app",
    router: myRouter
  })