vue-cli之router基本使用方法详解

深入理解Vue CLI中Router的使用方法：一个实用指南

本文将详细vue-cli中的router使用方法，为您在开发过程中提供有力的帮助。无论您是初学者还是经验丰富的开发者，本文都将为您提供有价值的信息。

一、创建Router配置

在src目录下新建router目录，并在该目录下建立index.js文件。在此文件中，我们将配置vue-router。具体代码如下：

```javascript

import Vue from 'vue';

import VueRouter from 'vue-router';

import Goods from '@/components/goods/goods'; // 这里假设有一个Goods组件

Vue.use(VueRouter);

export default new VueRouter({

routes: [

{

path: '/',

redirect: {name: 'goods'} // 默认重定向到Goods组件

}

]

});

```

在上述代码中，'@'符号是在webpack.base.conf.js文件中定义的别名，用于简化组件的引入路径。每次引入组件文件时，我们不需要写冗长的相对路径，只需使用'@'代替即可。该配置可以使得我们的代码更加简洁、易读。

二、挂载Router到入口文件

在入口文件main.js中，我们需要引入刚刚创建的router并挂载到Vue实例上。代码如下：

```javascript

import router from './router'; // 引入router配置

new Vue({

el: 'app', // 挂载点

router, // 使用刚才创建的router配置

template: '', // 根组件模板

components: { App } // 注册App组件

}).$mount('app'); // 手动挂载到指定元素上，这里使用jQuery风格的写法'app'来指定挂载元素。注意这里的写法是为了兼容旧版本的Vue写法，新版本Vue可以直接省略$mount方法，因为Vue会自动挂载到挂载点元素上。不过这里为了保持原文风格，依然保留了$mount的用法。不过请注意，新版本的Vue推荐省略此部分。 按照现代编程规范应该直接挂载至 DOM 上即可，不必额外调用 `$mount` 方法。现代 Vue 版本会自动处理挂载逻辑。这里的代码风格与原文保持一致，以确保一致性。但请注意在实际开发中遵循的 Vue 版本规范。 需要注意的是，在 Vue 的新版本中，我们不再需要显式地调用 `$mount` 方法来挂载 Vue 实例，Vue 实例会自动挂载到对应的 DOM 元素上（如果在创建实例时没有指定 `el` 选项）。因此在实际开发中请遵循的 Vue 版本规范和使用习惯。不过为了保持原文风格的一致性，这里依然保留了 `$mount` 的用法注释说明。在真正开发过程中请根据实际情况省略不必要的部分。接下来我们会继续解释其他部分的内容。三、在组件中使用Router接下来我们在组件中使用router进行页面跳转和内容展示在组件如App.vue中使用router-link进行导航点击即可切换路由展示的内容则会被渲染在router-view容器中代码示例如下template部分div id"app" div class"tab" router-link to"/goods" 商品 div router-view div div这里通过router-link标签定义了路由的链接to属性指定了路由的路径点击该链接时将会跳转到对应的路由页面展示的内容则由router-view标签来承载四、设置路由节点的样式如果有多个路由节点如商品商家评论等并且你想要设置当前点击的某个节点的样式可以使用css来实现例如通过给当前激活的路由节点添加一个特定的类名并设置相应的样式如 .router-link-active {color: rgb(139,0,0);}以上就是本文的全部内容希望对您的学习有所帮助也希望大家多多支持我们的博客狼蚁SEO总结本文详细介绍了Vue CLI中Router的使用方法包括创建Router配置挂载Router到入口文件在组件中使用Router以及设置路由节点的样式等内容通过本文的学习您可以更好地理解和使用Vue中的Router为开发Vue应用提供有力的支持如果您有任何疑问或建议请随时联系我们我们会尽快回复您的留言并提供更多的帮助和支持