路由跳转的两种方式及动态创建路由

跳转路由的方式,有两种
      1.声明导航
       1)  跳转
		    	router-link 是 vue -router提供的一个全局组件
		  	    router-link 实质上最终会渲染成一个a标签,to属性等价于 href属性(to不需要)
		   	   router-link 提供了声明导航高亮的功能(字典类名)
       2)  传参
       	 在router-link  上的to属性传值,方法如下:

     	
        (方式一)
	        to=/path?参数名 = 值
	     	 例:<router-link to="/about?name=小明"></router-link>
	        获取陆游的参数:
	        
	        this.$route.query.参数名
	        例:this.$route.query.name

        (方式二)
	        to="/path/值"(需要在路由规则里配置: /path/:参数名)
	        例: to="/path/小豆芽"
	        配置: path: "/about/:username"
	
	        获取参数
	        this.$route.params.参数名
	        例:this.$route.params.username
        
         2.编程式导航
	        用js代码来进行跳转
	        语法:path 或者name任选一个

        $router 和 $route 的区别
	          $router: 是路由的操作对象(比喻成路由器.装着所有的路由),跳转的时候用
	          $route: 是路由的信息对象(比喻成一个路由,存储这当前路由中的所有信息),获取路由参数的时候用


	          跳转的具体方式:  语法:  path 或者 name 人选一个
	            this.$router.push({name:"路由中配置的文件",query:{name="值"}})
	        
	          接收参数: 在对应的页面
	          let name_nex = this.$route.query.name
          
       	3.区别(重点!!!)

        跳转方式的区别:
       	   1.path和name的相同点: 都可以实现页面得切换(路由跳转)
                               都需要在路由中提前配置好.
                               声明式导航和编程式导航都可以使用
                        不同点:
                                path的值是会变得,例如: 动态路由/path/:username(路径)
                                name的值是不会变的,前缀不需要带 /,只是一个名字(字符串)
                            *** 使用path跳转路由时,path会忽略params(参数为undefined),所以path和params不能一起使用
                                推荐使用name和query的方式来实现路由跳转
        	  2.query和params的相同点:
                             都是路由传参的方式,声明式导航和编程式导航都可以使用
                        不同点:
                              query相当于get请求,编写方便.但是页面跳转的时候,参数显示在地址栏,存在安全隐患
                              params相当于post请求,需要配置动态路由(具体方式参考上面注释),参数不会显示在地址栏中,相对安全(相对于get和set安全,不完全安全)

总结:

1.什么是动态路由  

	1).配置路由:
	{
	path:"/path/:参数名",
	name:"name"
	}
	2).this.$route.params.参数名
	3)<router-link to="/path/值">今年初撒</router-link>

2.动态路由的作用是什么

	跳转页面,传递参数,改变path的内容

3.介绍一下router-link

	1)router-link  是vue-router提供的一个全局组件
	2)router-link 实质上最终会渲染成一个a标签   to属性 等价于href  (to属性不需要#)
	3)router-link  自己提供了高亮的功能(自带类名)
	4)router-link 中的tag属性 -- tag添加赋值为"空"不显示此内容  --- tag是用来改变标签的 默认渲染a标签
	 

4.介绍一下router-view
<router-view><router-view/>（命名视图）

<router-view/>（嵌套命名视图）

	是用来渲染通过路由映射过来的组件,当路径改变时,其中的内容可会随之改变

5.query传参的的方式及获取参数

   <router-link to="/path?参数名:值"></router-link>
      this.$route.query.参数名
      
7.params传参的方式及获取

      配置:{
        path:"/path/:参数名",
        name:"name",
        component:()=>improt{"路径"}
      }
      
	 <router-link to="/path/值"></router-link>
	 
      this.$route.params.参数名
      
9.分别描述声明式导航和编程式导航

声明式导航是通过router-link 中的to传参以及跳转组件

编程式导航是通过js代码封装成一个方法需要时调用即可(
	this.$router.push(name:"name",query:{ 参数名:值})
	使用this.$route.query.参数名获取
)

10.$router和$route的区别
 	   $router：是路由的操作对象(比喻成路由器，装着所有的路由)，跳转的时候用
       $route：是路由的信息对象(比喻成一个路由，存储着当前路由的所有信息)，获取路由参数的时候用

11. path和name跳转方式的相同和不同点
		   相同点：
                        都可以实现页面的切换(路由跳转)
                        都需要在路由中提前配置好。
                        声明式导航和编程式导航都可以使用
            不同点：
                        path的值是会变得，例如：动态路由/path/:username
                        name的值是不会变的，前缀不需要带 / ，只是一个名字(字符串)
                        使用path跳转路由时，path会忽略params(参数为undefined)，所以path和params不能一起使用
                         推荐使用name和query的方式来 

12..query和params传参方式的相同和不同点
			 相同点：
                         都是路由传参的方式; 声明式导航和编程式导航中都可以使用
             不同点：
                        query相当于GET请求，编写方便。但页面跳转的时候，参数显示在地址栏，存在安全隐患   
                        params相当于POST请求，需要动态路由(具体方式参考上面注释)，  参数不会显示在地址中，相对安全(但不完全安全)
                        
13.使用name 和 query
    	<router-link :to="{ name:'about',query:{name:'豆本豆'} }"> about</router-link> 
      使用name 和 params
		 <router-link :to="{ name:'about',params:{name:'豆本豆'} }"> about</router-link>