vue-router

提示：在electron vue ts 的基础上进行vue-router配置

---

提示：在确保安装了vue的前提下进行此步骤

一、vue-router是什么？

vue-router 是一个官方的 Vue.js 插件，它允许开发人员在应用程序中实现路由。路由可以看作是前端应用程序中的页面，其可以是任何东西，例如登录、主页、个人设置等等。实现路由可以让应用程序具有页面路由功能，从而能够实现多页面之间切换，以及 URL 中的参数控制页面的显示。通常用作点击按钮实现页面之间的切换

二、使用步骤

1.安装

代码如下（示例）：

npm install vue-router

2.使用路由

下载成后即可在package.json中看到依赖

然后在项目中新建一个目录,用来存放路由文件。通常命名为router,其次在router里面新建一个文件抛出路由对象,通常命名为index,我使用的是ts,所以是ts文件。

import { createRouter, createWebHashHistory, createWebHistory,
import Home1 from '../views/Home1.vue'//页面1
import Setting from '../views/Setting.vue'//页面2
//........把页面组件导入进来,可以有多个

const router:Router = createRouter({
  history:createWebHashHistory(),
  routes:[{
  	path:'/', //路径,用来切换页面时用到,'/' 为默认页面
  	name:'主页1',//名称,随便起
  	component:Home1 //页面组件。
  },
  {
 	 path:'/Setting',
  	name:'设置',
  	component:Setting
  },
{
	path:'/login',
  	name:'登录',
  	component:()=>import('./views/login.vue) //除了可以用导入的方式,还可以使用这种方式
}
]
})
export defalut router //抛出

在入口文件中让主组件使用router

import { createApp } from 'vue'
import router from './router' //从index.ts文件中解析出router 因为router文件夹中只有一个index.ts 所以默认引用的就是 router/index.ts 
import App from './App.vue'


createApp(App)
  .use(router).mount('#app')

在需要切换页面的文件中使用 <router-view/>当做占位符,默认页面就是index.ts中 路径为'/'的组件,既home

页面的切换:

<script>
import useRouter from 'vue-router'
const router=useRouter()
</script>
<templement>
<button @click="router.push('/Setting')"></button> //传入需要切换页面的路径
</templment>

页面的返回:在跳转的页面新增一个返回按钮

<script>
import useRouter from 'vue-router'
const router=useRouter()
</script>
<templement>
<button @click="router.back()"></button> //传入需要切换页面的路径
</templment>