路由导航和编程导航, 动态路由，命名视图 总结

1.路由导航：

 1.//第一种写法 => 这个是路径路由
    <router-link  :to="{path:'/nba'}"> NBA </router-link>	 
 2.//第二种写法分两步如下： => 这个是命名路径
    1. <router-link  :to="{name: 'NBA' }"> NBA </router-link>
    2. //在配置js文件的VueRouter实例里面添加一个name的键值对如下：
       routes：[{name:'NBA',  path:'/nba',  component :NBA}]
 3.//懒路由写法
    1.component: ()=>import('@/views/two')

2.路由传参

1.使用query传递：=> <router-link  :to={path:'/nba'，query:{m  essages:'骑士队vs勇士队'}}>NBA</router-link>

2.使用params传递：=> <router-link  :to={name:'nba'，params:{messages:'骑士队vs勇士队'}}>NBA</router-link>

3//备注：使用params传递参数必须使用命名路径 params传递参数时不会吧参数拼接到url地址后面然后query会拼接参数到url地址后面

3.在跳转这边的路由页面接收参数：

 1. this.msg = this.$route.params.message  
 2. this.user = this.$route.params.username 

4.编程导航

 在一个标签中绑定事件比如：在button标签中绑定一个点击事件@click= “ onadd "
 在 methods 中定义方法如下：

onadd（）{ this.$router.push ( { path:' /nba ', query:{message:'骑士打勇士队',username:'admin'}})}
onadd（）{ this.$router.replace ( { name:'nba ',params:{message:'骑士打勇士队',username:'admin'} })}

//接收参数和第3点一样

5.动态路由

    动态路由就是传递参数的一种方式只不过动态路由是将参数直接拼接到rul地址后面比如我需要传递一个参数 1001 示例如下：    

    //在router 配置路由中
    {
        name:"login",
        path:"/login/:id"
        component:login
    }
    
    //在组件中 直接将要传递的参数拼接到地址后面
    <router-link  :to={path:'/login/1001'}> 登录页面 </router-link>	
    
    //在login登录页面组件中就可以直接使用方式如下
    <p>$route.params.id</p>

6.命名视图 一个路由对应 多个文件组件

// 在router配置路由规则中将 component 改为 components 写法如下
{
    path: '/test',
    name: 'test',
    components: {
      sidebar: () => import('@/components/test1.vue'),
      content: () => import('@/components/test2.vue')
      ......
    }
    
// 在App.vue中或者是在需要展示路由组件的文件中 如下写入 router-view 用于展示
    <router-view name="sidebar"></router-view>
    <router-view name="content"></router-view>
    ......