vue-router安装和路由的基本用法

官网:https://router.vuejs.org/zh/

1.在终端使用npm安装

npm install vue-router

2.创建路由模块

在src源代码目录下,新建router/index.js路由模块,并且初始化如下代码:

//1.导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'

//2.调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)

//3.创建路由的实例对象
const router =new VueRouter()

//4,向外共享路由的实例对象
export default router

3.配置

在vue项目中,要想把路由用起来,必须把路由实例对象,通过下面的方式进行挂载

在main.js文件中导入路由模块
在进行模块化导入的时候,如果给定的是文件夹,则默认导入这个文件夹下,名字叫做index.js的文件
vue-router安装和路由的基本用法


路由的基本用法

<!-- 当安装和配置了 vue-router 后,就可以使用 router-link 来替代普通的 a 链接了 -->
	//普通的a链接
    <!-- <a href="#/home">首页</a> -->
    //更改后 可以将to理解为herf属性
    <router-link to="/home">首页</router-link>
  

在路由里面配置选项(定义hash地址与组件之间的对应关系)

举例

先导入

// 导入需要的组件
import Home from '@/components/Home.vue'

// 创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组,作用:定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
    // 重定向的路由规则:用户在访问地址A的时候,强制用户跳转到地址C,从而展示特定的组件页面。
    //通过路由规则的redirect属性,指定一个新的路由地址,可以很方便的设置出路由的重定向
    { path: '/', redirect: '/home' },
    // 路由规则
    //component:为要展示的组件
    { path: '/home', component: Home },
    
  ]
})

上一篇:FastAPI(40)- 大型应用程序的项目拆分


下一篇:React路由