Vue之vue-router

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')

然后就可以跳转到需要的页面了