提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
1.路由插件集成和配置
1.环境配置:
vue creat init
cd init
npm run serve
2.跳转路由
router-view和router-link 标签:
(1)router-view:相当于 路由网址匹配到的组件 会渲染到当前组件的这个标签上。
(2)router-link:相当于a标签,给我们提供跳转到某个路由的功能,如果没有匹配到路由就会跳转失败:
<router-link to="/xx"> xx<router-link >
编程式跳转: this.$router.push({path:"路由"})
跳转路由的方式:
a标签和router-link标签的区别:
(1)a标签会请求服务器,然后刷新网页,因此用在链接外部网页
(2)router-link它渲染到页面也是a标签,但是只是改变了地址栏的网址并没有重新加载网页
(3)路由的底层就是采用的history去监听地址栏的变化,然后把当前app组件中的router-view切换了。因此 router-link这种跳转用在网站内部的路由跳转
3.query传参和动态路由传参
两者传参的区别:
query传参是把参数放在querystring字段中,动态路由传参是把参数放在pathname中
3.1 query传参
路由传参有2种方式
传递的参数都在路由信息对象中: 路由对应的组件中获取 this.$route
3.1 query传参
//2种传参:
<router-link to="/xx?name=karen&pwd=123">go</router-link>
this.$router.push({path:"/xx",query:{name:"karen",pwd:123}})//在路由匹配的组件中获取数据:
mounted(){let queryObj=this.$route.query}
传参的四种方式:
query示例如下:
(1)主页面如下:
(2)跳转的页面(接收数据):
3.2动态路由传参
3.2动态路由传参
//设计:
const router=new VueRouter({
routes:[
{path:"/home/:id",component:()=>import("./home.vue")},
{path:"/about",component:()=>import("./about.vue")}]
})//2种传参:
<router-link to="/home/123">go</router-link>
this.$router.push({path:"/home",params:{id:123}})//在路由匹配的组件中获取数据:
mounted(){let paramsObj=this.$route.params}
动态路由传参步骤:
动态路由传参示例如下:
(1)注册(router里面的index.js中去注册)
(2)注册的news文件里
4.注册子路由
子路由的实现方式:
(1)在router里面的index.js文件里面去注册子路由:
(2)然后一定要在a文件里面写:
5.跳转的其他方式和路由模式
5.1 路由嵌套--子路由跳转
*代表所有匹配都通过
redirect代表重定向
//注意:子路由中的匹配地址不要在前面加/ 否则就会认为是根路由
子路由嵌套:
组件中跳转:
跳转总结:
注册路由时,路由路径不要在前面加 斜杠
跳转路由时 1.path里写的路径必须前面加斜杠 从根路由路径开始写 2.不用path 直接使用name