Vue2和Vue3创建路由

最新推荐文章于 2024-03-13 12:01:15 发布

小猫虎儿~

最新推荐文章于 2024-03-13 12:01:15 发布

阅读量436

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_61562639/article/details/126483269

版权

Vue2创建路由

1、安装vue-router依赖模块

npm install vue-router

2、在main.js中，需要明确安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)

3、定义组件

这里使用从其他文件import进来

import index from './components/index.vue'
import hello from './components/hello.vue'

4、定义路由

const routes = [
    { path: '/index',
     component: index
    },
    { path: '/hello', 
    component: hello 
    }
]

5、创建 router 实例，然后传 routes 配置

const router = new VueRouter({
  routes
})

6、创建和挂载根实例

const app = new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

经过上面的配置之后呢，路由匹配到的组件将会渲染到App.vue里的<router-view></router-view>

那么这个App.vue里应该这样写：

<template>
  <div id="app">
        <router-view></router-view>
  </div>
</template>

index.html里呢要这样写：

<body>
    <div id="app"></div>
</body>

7、路由信息对象

（1）$route.path
        字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
（2）$route.params
        一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
（3）$route.query
        一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有         $route.query.user == 1，如果没有查询参数，则是个空对象。
（4）$route.hash
        当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。
（5）$route.fullPath
        完成解析后的 URL，包含查询参数和 hash 的完整路径。
（6）$route.matched
        一个数组，包含当前路由的所有嵌套路径片段的路由记录。

路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。

Vue3创建路由

1、安装vue-router依赖模块

npm install vue-router

2、src目录下创建router/index.js文件，并创建views文件夹，再创建一个Home.vue和User.vue文件测试

（1）router/index.js

import { createWebHistory, createRouter } from "vue-router";
import Home from '../views/Home.vue';
import User from '../views/User.vue';
const history = createWebHistory();
const router = createRouter({
history,
routes: [{
    path: '/',
    name:'home',
    component: Home
    },
    {
    path: '/user',
    name:'user',
    component: User
    }]
})
export default router;

（2）Home.vue

<template>
    <div>首页</div>
</template>
<script>
    export default {
    
    }
</script>
<style >

</style>

（3）User.vue

<template>
    <div>user</div>
</template>
<script>
    export default {

    }
</script>
<style >

</style>

（4）main.js导入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

（5）App.vue添加< router-view></ router-view >

<template>
    <div id="app">
        <h1>在vue3里面使用Router</h1>
        <router-link to="/">首页</router-link>|
        <router-link to="/user">用户</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
export default {

    }
</script>
<style>

</style>