vue 中路由的注册与跳转

在单页面中切换页面我们必须要用到路由这里记录下路由注册与跳转的实现方式

• 在 src 文件夹下新建 router文件夹 并新建index.js 文件

// 引入路由跟组建
import { createRouter, createWebHashHistory } from 'vue-router'

//注册需要跳转的路由组建
const routes = [{
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        component: () =>
            import ('../views/AboutView.vue')
    },
    {
        path: "/detail",
        name: "detail",
        component: () =>
            import ('../views/DetailView.vue')
    },
    {
        path: "/abouts",
        name: "abouts",
        component: () =>
            import ('@/views/AboutUs.vue')
    },
    {
        path: "/login",
        name: "login",
        component: () =>
            import ('@/views/loginView.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 导出路由组建
export default router

在main.js 中导入路由 并使用

// 我是手动创建的项目 并且默认使用了路由所以这里系统就默认引入并使用了
import router from './router'
import store from './store'

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

注册完要配置路由的出口

 // 根据自己的需要  我这写在了跟组建App.vue中
 <router-view/>

到这里启动项目你会发现系统就默认跳转到了你配置的跟组建中

那么在页面中如何实现跳转呢 ?

// 自定义跳转点击事件
 function myFn() {
     // router.push('/detail')  // 不带参数直接跳转
     // router.push({path:"/detail",query:{id:10,name:"二狗子"}}) // 携带参数跳转
     // 声明命名的路由 跳转
     router.push({name:"detail",params:{id:100,name:"路飞"}})
   };
 // 如果携带了参数 接收页面接收参数的方法分别是
 // 在跳转到的页面引入路由组建
 import { useRoute } from 'vue-router'
   // 接收上一页面的路由传值
   const router = useRoute()
   // let ids = router.query.id
   // let names = router.query.name

   // 接收命名路由跳转方式的参数
   let ids = router.params.id
   let name = router.params.name
   console.log('接收到的路由参数' + ids + name)
        

再记录一种使用router-link 跳转的方式

/// 在组建代码模板里在需要跳转的地方使用
<router-link class="logins" to="/login">去登录</router-link>
// 需要注意的是这里router-link 其实是可以作为一个标签使用的

// 如果使用router-link 跳转时需要携带参数 传参与接收方式与使用push方法一致

• 不管push 也好 router-link 跳转也好 都需要首先在router 下的index.js 文件中首先注册组建否则都是无法完成跳转的

• 路由跳转的方式有很多 这里只记录下这两种 如果大佬有更好的实现方式忘不吝赐教.......