在vue中使用插件的步骤
1、引入Vue
2、引入插件
3、使用插件 Vue.use()
当路由配置成功以后Vue中就会多了两个内置组件
<router-view></router-view> //当路径匹配成功以后 router-view用来显示相对应的组件 <router-link></router-link>
1、做路由的跳转 必须要添加一个属性 to:跳转的路径
2、除此之外 router-link 身上还会有一个tag属性 指定router-link 渲染成指定的标签
路由的配置
mode:路由的形式 hash路由 history路由
routes:[] 每一个路由页面的配置项 routes中的配置项
path:"路径匹配的路径"
component:当路径匹配成功需要渲染的组件
redirect：重定向
children:路由嵌套的配置项 这个属性和routes一样
路由嵌套中path只需要写路径的名称即可 name:当前路由的名称 props:
路由解耦 路由传值的方式
1、动态路由 流程 1、在定义路由的时候设置传递数据的key值 path:"/路由地址/:key1/:key2" key1 key2代表的数据的键值
eg: path："path:/login/:id"
2、在做路由跳转的时候定义传递的数据 to="/路由地址/参数1/参数2"
eg:<router-link to="/login/:12"><router-link>
3、在需要接受信息的组件内部通过this.$route.params进行接收
this.$router.params.id
2、query传值 流程：
1、通过query的方式进行数据的传参 key=val&key=val
简写："name:路由地址，query:{id: ,name:}" 所谓的query传值其实就是我们常说的get传值的方式 通过？后面进行拼接
eg:<router-link :to=“{name:"login",query:{sid:sid}”></router-link>
2、接收的时候通过this.$route.query进行接收
3、路由解耦(只适合动态路由传值)
1、在定义路由的时候添加一个属性props:true
2、接收的时候只需要通过props进行接收即可 query传值 和 params 传值的区别？ 前者的参数可传可不传 后者的参数是必须要传递的 编程式导航 路由跳转的方式
1、a标签跳转 影院
2、组件 router-link
3、编程式导航 通过js进行路由的跳转 this.$router.push 跳转 this.$router.back 后退 this.$router.forward 前进 this.$router.replace 替换