vue 中的导航方式

vue 中的导航方式

声明式	编程式
router-link to=" "	this.$router.push()

编程式导航—路由传值

1.path跳转，只能用query传参，参数会显示在地址栏

this.$router.push({
     path : '/main',
     query : {
         userName : this.ruleForm.name
    }
 })


 跳转到的页面（获取参数的页面）：
{{this.$route.query.userName}}

2.name跳转，既可以用query,也可以用params

this.$router.push({
	name : 'Goodslist',
    query :{
         kw :item
    }
})


跳转到的页面：
{{this.$route.query.kw}}

this.$router.push({
	name : 'Goodslist',
    params : {
         kw : item
    }
})


跳转到的页面：
{{this.$route.params.kw}}

嵌套路由

为什么需要嵌套路由

• 实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件
• 如果需要让一个组件内部的某个部分的内容进行动态改变，那么就需要添加嵌套路由
• 因为我们希望能够匹配的路由所对应的组件在某个组件内部的某个位置出现，而不是覆盖当前页面

如何添加嵌套路由的配置

• 通过children来设置
• 细节：不要在嵌套路由的path值中添加 / ,否则会破坏当前路由的层级

实现嵌套路由的跳转

• 以前是通过router-link来实现路由跳转–声明式导航
• 现在我们需要通过js代码进行跳转–编程式导航