Vue路由知识总结

Vue路由是Vue.js的官方路由管理器，它允许开发者构建单页面应用程序，通过管理页面之间的切换和导航。以下是Vue路由的一些重要知识总结：

1. 路由的基本使用：

   • 使用Vue Router库来创建路由实例，并将其注入到Vue实例中。

   • 使用<router-link>组件来创建导航链接，使用<router-view>组件来渲染匹配的组件。

2. 路由配置：

   • 可以通过routes选项来配置路由，定义路由规则和对应的组件。

   • 可以通过mode选项来配置路由模式，包括hash和history模式。

3. 路由参数和动态路由：

   • 可以使用动态路由来匹配不同的URL，并传递参数到组件中。

   • 可以通过$route.params来获取路由参数。

4. 嵌套路由：

   • 可以在路由配置中定义嵌套路由，实现多层级的页面嵌套和导航。

5. 路由导航守卫：

   • 可以使用路由导航守卫来控制页面的访问权限和页面跳转的逻辑。

   • 包括beforeEach、beforeResolve、afterEach等导航守卫。

6. 路由懒加载：

   • 可以使用路由懒加载来按需加载路由对应的组件，减少页面加载时间和提高性能。

7. 路由传参：

   • 可以通过路由传参来在不同页面之间传递数据，包括query参数和params参数。

总之，Vue路由是Vue.js中非常重要的一部分，掌握了Vue路由的基本使用和高级特性，可以更好地构建复杂的单页面应用程序。

1、Vue路由知识：

Vue路由是Vue.js的官方路由管理器，它允许开发者构建单页面应用程序，通过管理页面之间的切换和导航。 首先需要安装vue-router2。

npm install vue-router@3  //安装vue3   npm install vue-router

安装vuex：

 npm install vuex@3

安装axios

npm install axios

安装echarts

npm install echarts

这样安装的是vue2的路由，安装之后需要在main.js进行配置:

import VueRouter from "vue-router";  // 使用VueRouter库来创建路由实例，并注入到Vue中。
Vue.use(VueRouter)
new Vue({
    render: h => h(App), router
}).$mount('#app')

在router目录下创建一个index.js文件:

import VueRouter from "vue-router";
import Index from "@/components/Index.vue";
import Login from "@/components/Login";
import Hello from "@/components/page/Hello";
import Category from "@/components/page/Category";
import Dish from "@/components/page/Dish";
const router = new VueRouter({
    mode: "hash",  // 路由的模式有两种：分别是hash和history。
    routes: [
        {path: "/", redirect: "/login"}, // 支持重定向。
        {
            path: "/index", component: Index, 	// 还支持二级路由 使用children。二级路由里面path不需要/。
            children: [{path: "hello", component: Hello},
                {path: "category", component: Category},
                {path: "dish", component: Dish},
        },
        {path: "/login", component: Login},
    ]
})
export default router

路由还可以使用this.$route.params来获取路由参数。

最后在.vue文件中使用<router-link>组件来创建导航链接，使用<router-view>组件来渲染匹配的组件。