在 vue 中使用 vue-router_var vm=new vue({ el:"#app", router })-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42926749/article/details/83268482

本文详细介绍如何在Vue项目中使用vue-router进行页面导航和组件展示。包括导入vue-router库，使用router-link和router-view组件，创建登录和注册组件，以及设置路由匹配规则。

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

导入 vue-router 组件类库：

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

使用 router-link 组件来导航

    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

使用 router-view 组件来显示匹配到的组件

    <router-view></router-view>

创建使用Vue.extend创建组件

 		// 4.1 使用 Vue.extend 来创建登录组件
        var login = Vue.extend({
          template: '<h1>登录组件</h1>'
        });
    
        // 4.2 使用 Vue.extend 来创建注册组件
        var register = Vue.extend({
          template: '<h1>注册组件</h1>'
        });

创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则

    // 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
        var router = new VueRouter({
          routes: [
            { path: '/login', component: login },
            { path: '/register', component: register }
          ]
        });

使用 router 属性来使用路由规则

    // 6. 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          router: router // 使用 router 属性来使用路由规则
        });