vue中路由router切换

一.实现一个简单的路由切换

前端路由使用hash值来切换，适用于单页面应用
vue中router的简单使用
1.下载vue-router.js 并安装

yard add vue-router

2.注册一个路由实例

const router = new VueRouter({
routes:[ 匹配路由规则 ]
})

把这个注册的路由添加到vue实例中

let vm = new Vue({
el:"#app",
data:{},
router 此处用的是es6语法
})

4.通过router-view引用到页面上

<router-view></router-view>

在vue中常用link代替a标签

router-link默认是a标签，页面上实际展示的是a标签实现路由跳转功能

<router-link to=’/login’>登录</router-link>

可以用tag更改默认标签

<router-link to=’/login’ tag=“span”>登录</router-link>

路由重定向 redirect

根标签，重定向，默认显示某个组件

{ path: ‘/’, redirect: ‘/login’ }

高亮显示当前元素

router-link-active 设置当前元素的css样式

也可自定义类名

在注册路由中设置：linkActiveClass:“myclass”

在路由切换中transiton的使用

路由切换动画，用transtion包裹，用法同前面的transition动画一致

<transition name=“fade” mode=“out-in”>
<router-view></router-view>
</transition>

路由传参

1.问号传参

<router-link to='/login?id=20'>登录</router-link>

获取时用 this.$route.query.id 获取参数

2.变量名传参

// 参数名与参数一一对应
<router-link to='/register/80/wang'>注册</router-link>
// 匹配路由
{ path: '/register/:id/:name', component: register }

获取时用 this.$route.params 获取参数

完整示例

// 高亮显示当前元素
/* .router-link-active{
            background: orange;
            color: #fff;
            font-size:26px;
} */
        .myclass{ // 自定义类名样式
            background: orange;
            color: #fff;
            font-size:26px;
        }

<!--页面显示内容  -->
    <div id="app">
        <router-link to='/login?id=20'>登录</router-link>
        <router-link to='/register/80/wang'>注册</router-link>
        
        <!--第四步   将路由组件展示到页面上  -->
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>

js代码

const login = {
           template: "<div>登录组件</div>"
      }
const register = {
           template: "<div>注册组件</div>"
       }

const router = new VueRouter({// 第一步 注册路由实例
          routes: [// 第二步  匹配路由规则
          	  { path: '/', redirect: '/login' },
              { path: '/login', component: login },
              { path: '/register/:id/:name', component: register }
          ],
          linkActiveClass:"myclass"   // 自定义类名
     })

 let vm = new Vue({
       el: "#app",
       data: {},
       created(){
                // ?问号传参
                // console.log(this.$route.query.id)
                // :+变量  形式传参
                console.log(this.$route.params)
            },
       router:router // 第三步  将路由添加到vue实例中
   })

二.路由嵌套 children

子路由使用children来匹配

//html代码
<router-link to='/accont/login'>登录</router-link>

// js代码
const router = new VueRouter({
   routes: [
        { path: '/', redirect: '/accont' },
        {
            path: "/accont", component: accont,// 父路由
                children: [// 子路由
                    // 注意：匹配路径时不要写/，/是匹配根路径
                   { path: 'login', component: login }, 
                   { path: 'register', component: register }
                 ]
            }
        ]
 })

三.命名视图

子路由可以嵌套在父路由，只用写一个 <router-view></router-view> 即可，
要是多个同级路由在同一页面 / 同一路径下，该如何处理呢？
vue提供了命名视图的方法，用name来区分视图。
默认视图采用default 命名，一般默认不写。

<router-view></router-view>   <!--name="default"  默认视图 -->
<router-view name="left"></router-view>  <!--left 变量 -->
<router-view name="right"></router-view>

在注册路由时可以这样写
一个根路径下，划分不同的组件，采用不同的命名，命名自己定义即可。
default 默认命名：组件
name:component
命名后面跟的是组件名，不要加“ ” 。
命名与上面视图的name一一对应

const router = new VueRouter({
    routes: [
        {
            path: '/', components: {
                default: head,  // default  默认视图
                left:left      // name : component
                right:right
               }
        }
     ]
})