Vue路由是Vue.js的官方路由管理器,它允许开发者构建单页面应用程序,通过管理页面之间的切换和导航。以下是Vue路由的一些重要知识总结:
-
路由的基本使用:
-
使用Vue Router库来创建路由实例,并将其注入到Vue实例中。
-
使用
<router-link>
组件来创建导航链接,使用<router-view>
组件来渲染匹配的组件。
-
-
路由配置:
-
可以通过
routes
选项来配置路由,定义路由规则和对应的组件。 -
可以通过
mode
选项来配置路由模式,包括hash
和history
模式。
-
-
路由参数和动态路由:
-
可以使用动态路由来匹配不同的URL,并传递参数到组件中。
-
可以通过
$route.params
来获取路由参数。
-
-
嵌套路由:
-
可以在路由配置中定义嵌套路由,实现多层级的页面嵌套和导航。
-
-
路由导航守卫:
-
可以使用路由导航守卫来控制页面的访问权限和页面跳转的逻辑。
-
包括
beforeEach
、beforeResolve
、afterEach
等导航守卫。
-
-
路由懒加载:
-
可以使用路由懒加载来按需加载路由对应的组件,减少页面加载时间和提高性能。
-
-
路由传参:
-
可以通过路由传参来在不同页面之间传递数据,包括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>
组件来渲染匹配的组件。