VUe:跳转 一级路由 二级路由

177 阅读1分钟

1.路由的作用:根据url锚点路径,在容器中加载不同的模块

原理:利用锚点完成切换

注意点:需要将组件映射到路由router-link 相当于a链接 to指的是跳转的路径 相当于href,明确vue-router在什么位置渲染 在父级路由中写

2.vue router中index.js文件详解

image.png

image.png

image.png 3.一级路由配置

(1)在index页面配置路由path

image.png

(2)在index页面配置好path后,在vue文件中使用router-link组件进行跳转,用router-view组件作为展示组件的容器

image.png 4.二级路由配置

(1)在index页面配置路由path,需要在children里配置,如果需要一打开页面就显示出来,需要配置redirect

image.png

image.png (2)在一级路由页面进行配置跳转以及页面渲染

image.png

image.png 5.路由重定向的两种方式 一:

image.png 二:

image.png