vue 路由

路由

根据地址栏的改变渲染不同的组件

实现单页面应用的一个手段。路径走向。

router: 路由器，代表的是整体

route：路由，代表的是个体

1. 控制地址栏的改变

   <router-link></router-link>
   

2. 渲染不同的组件

   <router-view></router-view>
   

路由的基本使用

1. 安装路由

 npm install vue-router

2. 配置路由表（router/index.js）

  1.引入vue 
 	import Vue from 'vue'

  2.引入路由
    import VueRouter from 'vue-router'

  3.使用路由
  	Vue.use(VueRouter)

  4.创建路由对象
  	let router = nwe VueRouter({
  	
  	})

  5.抛出路由对象
  	export default router

  6.配置路由 地址栏路径和组件的联系
  	(1)引入组件
  		import component1 from ‘../component1.vue’ 
      let router = nwe VueRouter({
            //配置路由路径及其跳转的组件
            routes;[
                {
                  path : '/component1',
                  components:component1
                }
            ]
        })

3. 注册路由(main.js)

   import router from './router.index.js' //index.js可以省略
   new Vue({
     router：router,    //key value一样 可以省略
     render: h => h(App),
   }).$mount('#app')
   
   
   import router from './router'
   new Vue({
     router,
     render: h => h(App),
   }).$mount('#app')
   
   

4. 使用新增的2个标签

router-view:指的是显示路由组件区域，路由容器，基于slot的封装

在页面开启一片空间 渲染不同的组件

router-link:打开指定的路由。

to属性 ： 相当于a标签的herf属性，后面跟跳转链接用 （声明式导航）

//路由中可以通过对象和字符串进行访问
//不区分大小写
//直接跳转
<router-link to="/home" ></router-link>>

//访问路由设置path为/home的路由
<router-link :to="{path:"/home"}" replace></router-link>

//访问name：“home”的路由 //区分大小写
<router-link :to="{name:"home"}" replace></router-link>

query
//传值
    <router-link :to="{path:'/one',query:{a:2,b:3,c:{}}}">One</router-link>|
    <router-link :to="{name:'one',query:{a:5,b:7,c:{d:9}}}">One</router-link>|
//接收
 console.log(this.$route.query.a,this.$route.query.b,this.$route.query.c);

- 分析
    优点：刷新数据库不会丢失。
    缺点：如果传递的是对象。如果刷新接收的数据会变成对象的原始值。[Object,Object]

params
//传值
     <!--params:只可以通过name进行数据传递。-->
     <router-link :to="{name:'two',params:{a:1,b:2,c:{d:4}}}">Two</router-link>|
//接收
console.log(this.$route.params.a,this.$route.params.b,this.$route.params.c);

- 分析
    优点：可以传递对象
    缺点：刷新数据丢失。

//传值
      <!--<router-link to="/three/1/2">Three</router-link>|-->
        <!--<router-link to="/three-11-21.html">Three</router-link>|-->
        <!--<router-link to="/three/123412341234.html">Three</router-link>|-->
        <router-link :to="{path:'/three/123412341234.html',query:{a:1,b:2}}">Three</router-link>|

//接收
  console.log(this.$route.params.id,this.$route.params.type)

- 分析
    优点：刷新数据存在。可以让你的地址更加漂亮。
    缺点：不可以传递对象

replace属性 ： 页面切 换时不会留下历史记录

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

tag属性 ： 具有tag属性的router-link会被渲染成相应的标签

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染结果 -->
<li>Home</li>
//此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面

active-class 属性 ： 设置激活链接时class属性，也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性(也可以写成activeClass)

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

exact 属性：开启router-link的严格模式

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

常用：

• to 属性控制地址栏改变

• tag 属性控制渲染的元素

• active-class 添加活跃状态的类名

路由的模式

1. hash 有#

2. history 没有#

   • 打包上线之后，刷新页面404， 需要后端做服务器配置

   let router=new VueRouter({
     mode:'history',//'hash'默认,
   })
   

命名路由

• 如果path特别长，可以给路由通过name属性起一个名字

• 切换的时候通过name 进行切换

   routes:[
       {
           path:'/recommend/a/b/cc/d/d/e/e/d/d/d/d',
           name:'ha',
       }
     ]
  
  <router-link :to="name:'ha'"></router-link>
  

命名视图

• 也就是给router-view命名

• 可以让router-view渲染不同的组件

  //1.给视图添加name属性 
  <router-view name="r1"></router-view>
  <router-view name="r2"></router-view>
  //2.配置路由index.js
  	//- 引用
  	import Recommend1 from  '../Recommend1.vue'
  	import Recommend2 from  '../Recommend2.vue'
  	//- 配置
  	 components:{
           r1:Recommend1,
           r2:Recommend2,
         }
       //注：components  加了s
  

• 没起名字的是默认

  <router-view></router-view>
  
  components:{
           default:Recommend,
           r1:Recommend1,
           r2:Recommend2,
         }
  

声明式导航与编程式导航

声明式导航

声明式导航是写在组件的template中，通过router-link来触发

编程式导航

• 通过js代码形式进行组件的切换

 	//$router路由对象
	this.$router.push("/my");
    this.$router.push({path:"/my"});
    this.$router.push({name:"my"});
    this.$router.go(-1)// 返回 1前进
	this.$router.go(1)// 前进

push 与 replace区别

当跳转页面为/a/b/c/d

push返回会先返回到/c，到/b，到/a

replace替换返回会直接返回到最初

重定向 - redirect

• 刚进入网页进行默认组件的显示

      {
        path:"/home",   // 当访问的地址为/home 会将地址重定向到/my
        redirect:"/my" 
    }
  

路由传参

1.query：path路径可以，name也可以，参数出现在地址栏

this.$router.push({path:'/singer',query:{us:123,ps:123}})
this.$router.push({name:'singer',query:{us:123,ps:123}})

2.params：参数不会出现在地址栏，页面刷新参数丢失

this.$router.push({name:'singer',params:{us:123,ps:123}})

params不能与path一起使用

3.动态路由：路由配置路径可以改变

• 可以将要传递的参数放在路径中，解决params刷新参数丢失问题

	//在配置路由时加‘：’  
   {
      path:'/singer/:hehe/:xixi',
      name:'singer',
      component:Singer
    },
    //无论地址栏写什么都能跳转 
    //例：/singer/1/2 params对象为
        params:{hehe:'1',xixi:'2'}

嵌套路由（子路由）

路由里套路由 ，router-view里套router-view

配置路由

 <router-view></router-view> 
//一定要记得引用
 	{
      path:'/my',
      component:My,
      children:[
        {
          path:'login', //不需要加’/‘
          component:Login
        },{
          path:'info',
          component:Info
        }
      ]
    },

路由的其他配置

404
    {
        path:"*",// 当找到匹配的路由时，该路由生效。
        component:()=>import("@/views/Error"),
        meta:{
            isHide:true
        }
    }

alias 别名

alias ：”/“   相当于给该路由加一个入口