vue学习路由篇（七）

最新推荐文章于 2022-09-01 20:37:36 发布

laker Zhang

最新推荐文章于 2022-09-01 20:37:36 发布

阅读量170

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/layxing27/article/details/109014509

版权

在这里插入图片描述

安装

标签引入(在vue引入后,vue-router是基于vue的)
npm安装(在项目中使用)

标签引入

下载vue-router.js文件
引入

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>

npm安装

下载
使用

下载

npm install vue-router

使用

 	import Vue from vue;
    import vueRouter from vue-router;
    Vue.use(vueRouter)

使用

router-view使用
router-link使用
routes配置
- 每个路由
  - path路径
  - component 组件
  - redirect 默认路由
- children 嵌套路由
linkActiveClass 路由高亮显示自定义
路由参数
第五个vue标签router-view
第六感vue标签router-link

router-view

创建路由实例
创建组件
配置路由规则
在实例中配置路由,监听路由变化
显示路由

使用

<div id="app">
    <a href="#/login">login</a>
    <a href="#/register">register</a>
   <router-view></router-view>
</div>
<script>
    const login={
        template:"<div><h1>login</h1></div>"
    }
    const register={
        template:"<div><h1>register</h1></div>"
    }
    const router=new VueRouter({
        routes:[
            {path:"/login",component:login},
            {path:"/register",component:register}
        ]
    })
    new Vue({
        data:{
        },
       router:router
    }).$mount("#app")
</script>

预览

在这里插入图片描述

使用链接时需要加上#

router-link

to属性跳转的路由地址
tag属性,默认a
请求路由地址不需要#

使用

<div id="app">
    <router-link to="/login">login</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>
<script>
    const login={
        template:"<div><h1>login</h1></div>"
    }
    const register={
        template:"<div><h1>register</h1></div>"
    }
    const router=new VueRouter({
        routes:[
            {path: "/",redirect:"/login"},
            {path:"/login",component:login},
            {path:"/register",component:register}
        ]
    })
    new Vue({
        data:{
        },
        router:router
    }).$mount("#app")
</script>

预览

在这里插入图片描述

嵌套路由(children)

使用

<div id="app">
    <router-link to="/account">account</router-link>
    <router-view></router-view>
</div>
<template id="tem">
   <div>
       <h1>account</h1>
       <router-link to="/account/login">login</router-link>
       <router-link to="/account/register">register</router-link>
       <router-view></router-view>
   </div>
</template>
<script>
    const account={
        template:"#tem"
    };
    const login={
        template: "<div><h1>登录组件</h1></div>"
    }
    const register={
        template: "<div><h1>注册组件</h1></div>"
    }
    const routerObj=new VueRouter({
        routes:[
            { path:"/account",
              component:account,
              children:[
                { path:"login",component:login},
                { path:"register",component:register}
            ]},
        ]
    })
    new Vue({
        router:routerObj
    }).$mount("#app");
</script>

预览

在这里插入图片描述

注意template 只能有一个根标签

linkActiveClass 路由高亮显示自定义

vue的router-link-active
自定义的linkActiveClass

router-link-active

使用

<style>
        .router-link-active{
            color: yellow;
            font-size: 40px;
        }
    </style>

预览

linkActiveClass自定义

使用

<style>
        .my{
            color: yellow;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div id="app">
    <router-link to="/login">login</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>
<script>
    const login={
        template:"<div><h1>login</h1></div>"
    }
    const register={
        template:"<div><h1>register</h1></div>"
    }
    const router=new VueRouter({
        routes:[
            {path: "/",redirect:"/login"},
            {path:"/login",component:login},
            {path:"/register",component:register}
        ],
        linkActiveClass:"my"
    })
    new Vue({
        data:{
        },
        router:router
    }).$mount("#app")
</script>

预览

路由参数

传值方式:login?id=1&name=lay query
传值方式:login/1/lay params

query

获取地址的信息
login?id=1&name=lay
使用

<div id="app">
    <router-link to="/login?id=1&name=lay">login</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>
<script>
    const login={
        template:"<div><h1>login---{{$route.query.id}}----{{$route.query.name}}</h1></div>",
    }
    const register={
        template:"<div><h1>register</h1></div>"
    }
    const router=new VueRouter({
        routes:[
            {path: "/",redirect:"/login"},
            {path:"/login",component:login},
            {path:"/register",component:register}
        ],
        linkActiveClass:"my"
    })
    new Vue({
        data:{
        },
        router:router
    }).$mount("#app")
</script>

预览

params

login/1/lay 传值
需要占位
使用

<div id="app">
    <router-link to="/login?id=1&name=lay">login</router-link>
    <router-link to="/login/1/lay">login</router-link>
    <router-link to="/register">register</router-link>
    <router-view></router-view>
</div>
<script>
    const login={
        template:"<div><h1>login---{{$route.params.id}}----{{$route.params.name}}</h1></div>",
    }
    const register={
        template:"<div><h1>register</h1></div>"
    }
    const router=new VueRouter({
        routes:[
            {path: "/",redirect:"/login"},
            {path:"/login/:id/:name",component:login},
            {path:"/register",component:register}
        ],
        linkActiveClass:"my"
    })
    new Vue({
        data:{
        },
        router:router
    }).$mount("#app")
</script>

预览
在这里插入图片描述

场景

经典布局
name属性 + components

使用

  <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .header{
            height: 100px;
            background: pink;
        }
        .main{
            float: right;
            height: 600px;
            background: skyblue;
            width: 70%;
        }
        .left{
            float: left;
            height: 600px;
            background: orange;
            width: 30%;
        }
    </style>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
</div>
<script>
    const header={
        template:"<div class='header'>header</div>"
    }
    const left={
        template: "<div class='left'>left</div>"
    }
    const main={
        template:"<div class='main'>main</div>"
    }
    const router=new VueRouter({
        routes:[
            { path:"/",components: {default:header,left:left,main:main}}
        ]
    })
    new Vue({
        router:router

    }).$mount("#app");
</script>