vue声明式导航和编程式导航

一、路由导航的几种定义方法

示例路由：

const routes = [
  {
    path: '/home',
    name:"home",
    component: () => import("../home/index.vue"),
  }

1、声明式

<router-link to="/home">home</router-link>

2、编程式

$router.push('/home')

二、使用方式

在路由中有多个跳转方式

1、声明式

第一种、直接通过路由地址跳转

<router-link to="/home">home</router-link>

第二种、使用对象中带path的方式跳转

<router-link :to="{path:'/home'}">home</router-link>

第三种、通过对象中带name的方式跳转

<router-link :to="{name:'home'}">home</router-link>

2、编程式

第一种、字符串

router.push('/home')

第二种、使用对象中带path的方式跳转

router.push({path:"/home"})

第三种、通过对象中带name的方式跳转

router.push({name:"home"});

三、路由传参

路由传参后的链接有两种形式

一种是 url+斜杠+参数 (params方式)

http://localhost:8080/user/10

另一种是 url+问号+参数 （query方式）

http://localhost:8080/user?10

分声明式和编程式来讲吧

1、声明式传参

①、params方式(声明式)

params方式的话是浏览器地址栏会变成 url+斜杠+参数

如：http://localhost:8080/home/10

第一种

<router-link to="/home/10">home</router-link> 

<router-link :to="{name: 'home', params: {id: 10 }}">home</router-link> 

②、query方式（声明式）

2.1、第一种

直接路由带查询参数query，地址栏变成 /home?id=10

<router-link :to="{path: '/home', query: {id: 10 }}">home</router-link> 

2.2、第二种

命名路由带查询参数query，地址栏变成/home?id=10

<router-link :to="{name: 'homename', query: {id: 10 }}">home</router-link>

2、编程式传参

2.1、第一种

$router.push("/home/10")

2.2、第二种

$router.push({name:"home",params:{id:10}})

3、无效传参

仅限于只有path和params同时存在的情况，这样的话，不管是声明式还是编程式，params会被忽略

直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略 
router.push({path:'homename', params:{ id: 10 }}) 

直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略 
<router-link :to="{path: '/home', params: { id: 10 }}">home</router-link>

但是如果path和name和params都存在的话，params还是可以正常传递过去的。

四、路由传递后的参数获取

params的获取方式

$route.params.xxx

query的获取方式

$route.query.xxx

五、需要注意的点

1、使用params的话，需要配置路由，如咱们传递个id过去，那么路由就应该写成

/路由名/:id

2、当默认跳转路由地址中子路由和其他路由地址重复，优先选择子路由