Vuerouter解决的是页面跳转的问题,如何在一个页面中加载另一个页面。不过在vue中是页面组件的问题,如何在一个组件中加载另一组件。在这里我只记载一种编写方式,唯一的方式就是最好的方式,防止新手也就是本人混乱。
第一步,我们要先安装vue-router的依赖
npm install vue-router@4
既然我们要编写一些代码来控制页面转换,我们就需要编写js代码。
一般情况下我们会建立一个 router文件夹,里面专门编写用来控制路由的js代码,新建一个views视图,里面专门写一些用来跳转的代码
第二步在index.js中引入需要的包
import {createRouter, createWebHashHistory } from 'vue-router'
分别是 这两个包 然后才能编写路由。
第三步,在需要引用的组件中编写代码
<div>
<router-view></router-view>
</div>
<div>
<router-link to="" >跳转到MAIN页面</router-link>
<router-link to="" >跳转到Two页面</router-link>
</div>
解释一下代码
<router-view></router-view> <---占位符,跳转的组件会渲染到这里
<router-link to="" >跳转到MAIN页面</router-link> <---跳转标签,点击即可跳转,to里面写路由信息。
然后我们需要在index.js中编写对应的路由信息,并且路由信息作为一个对象来使用的
import {createRouter, createWebHashHistory } from 'vue-router'
// 第一步,将需要跳转的组件引入到js文件当中
import Main from '../views/Main.vue'
import Two from './views/Two.vue'
//第二步,编写对应的路由表
const routes = [
{path:"/Main",component :Main},
{path:"/Two", component:Two}
]
// 第三步,创建路由实例,并且传递routes配置
// 解释一下:调用createRouer方法创建路由实例,里面需要两个参数,一个是路由的模式 有hash 和history,一个是我们写好的路由表
const router = createRouter({
history:createWebHashHistory(),
routes,
})
// 第四步,将router暴露出去,让main.js可以捕获
export default router
请注意此时所有的信息 router就是一个对象,一个组件。
请注意,千万注意这里的问题 !!!!将router暴露出去的时候必须不能加括号,加括号的话会导致<router-link >标签失去效果
然后在main.js中进行代码编写
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
// 将rouer组件引入
import router from './router/index'
// 创建主要的app实例,用来被使用
const app = createApp(App)
// 全局注册router组件,这样的话全局就可以使用路由表跳转了
app.use(router)
// 将主组件挂载到app上
app.mount('#app')
然后就可以跳转到需要的页面了