Vue--路由的安装与配置

最新推荐文章于 2025-03-19 22:06:56 发布

原创最新推荐文章于 2025-03-19 22:06:56 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何在Vue项目中配置和使用Vue Router，包括在main.js中直接配置路由、封装路由模块并在所需文件中引用的方法。从安装vue-router到在组件内配置路由入口和出口，覆盖了路由配置的全过程。

一、直接在main.js文件中配置

1.安装路由

 cnpm install vue-router --save-dev

安装后package.json中出现如图所示vue-router配置，即为安装成功
在这里插入图片描述
2.在main.js中new Vue中配置router

new Vue({
  el: '#app',
  router,        //一定注意要在此处配置，不配置会出现如下图错误
  render: h => h(App)
})

在这里插入图片描述
3.在 main.js中引用路由

import vueRouter from "vue-router" ;   //vueRouter为自定义变量名

4.在main.js中注册

Vue.use(vueRouter);

5.引入路由组件

import Home from "./component/fourpage/home"

6.配置路由

let router=new vueRouter({
  routes:[{         //注意此处为  routes
    path:"/",     //显示的路径，在浏览器地址栏默认显示 /#
    component:Home     //该路由从Home组件开始跳转
  })

为使浏览器地址栏默认显示 “/”，可在main.js中做如下配置

let router=new vueRouter({
    mode:"history";
})

7.在跳转的组件内配置路由入口

 <router-link  :to="address">{{value}}</router-link>
 //router-link 编译后相当于一个跳转地址为address的 a 链接
 //router-link 标签必须设置“to”属性，“to”属性值为跳转的路径

8.在跳转后显示内容的组件内配置路由出口

<router-view></router-view>

二、封装路由模块，在所需文件引用

安装，同上；
建立router.js文件，并引入配置

//引入vue
import Vue from "vue";
//引入路由模块
import vueRouter from "vue-router";
//路由与Vue关联
Vue.use(vueRouter);

//配置路由
let routers=[];
//实例化路由对象
let router =  new vueRouter({
    routers,  //配置的路由
    mode:"history"   //默认的浏览器地址
});

//暴露出路由对象
export default router;

在main.js中引入路由对象，并配置

//引入路由对象
import Router from "./router/router"
new Vue({
  el: '#app',
  router: Router,    //配置路由
  render: h => h(App)
})