The road to the Vue（六、使用 vue-router 库)

最新推荐文章于 2024-09-14 16:20:03 发布

原创最新推荐文章于 2024-09-14 16:20:03 发布 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中集成VueRouter，包括安装步骤、配置和使用方法。从创建组件到设置路由，一步步引导读者实现动态页面切换。

一：什么是 Vue Router

Vue Router 是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。

二：安装

官网：https://router.vuejs.org/zh/installation.html

vue-router是一个插件包，所以我们还是需要用npm/cnpm 来进行安装的，打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router

安装完成后在 node_modules 下即可找到此模块( 没安装前没有这个模块)
在这里插入图片描述

三：使用

如果在一个模块化工程使用它，必须通过 Vue.use() 明确地安装路由功能：

import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter);

在这里插入图片描述

在终端输入 npm run dev 命令运行程序并访问网站

接下来我们来编写自己的组件

1、在components中新建两个组件(一个内容页、一个首页)

在这里插入图片描述

2、安装路由，在src目录下，新建一个文件夹：router，专门存放路由

在这里插入图片描述

3、在router文件夹中新建一个index.js

import Vue from 'vue'
import VueRouter from "vue-router";// 安装后导入 还需显式声名才能使用

import Content from "../components/Content"
import Main from "../components/main"

//安装路由 显式声名才能使用
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //请求路由路径
      path:'/Content',
      //路由名称
      name:'content',
      //跳转的组件
      component:Content
    },
    {
      //请求路由路径
      path:'/Main',
      //路由名称
      name:'main',
      //跳转的组件
      component: Main
    }
  ]
});