Vue——23——路由

其他 2020-09-08 20:36:02 阅读次数: 0

文章目录

一:vue-router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <div id="app">
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>
        <!-- 这是vue-router提供的元素,专门用来当做占位符的,将来路由规则匹配到的组件就会展示到这个router-view中去
        所以,我们可以把router-view认为是一个占位符 -->
        <router-view></router-view>
    </div>
    <script>
        //组件的模板对象
        var login={
            template:"<h1>登录组件</h1>"
        }
        var register={
        template:"<h1>注册组件</h1>"
        }
        
        /* 组件名称 不能放path里面
        Vue.component('login',{
            template:"<h1>登录组件</h1>"
        })*/
        //创建一个路由对象,当导入vue-router包之后,在window全局对象中,就有了一个路由的构造函数,叫做VueRouter
        //在new路由对象的时候,可以为构造函数传递一个配置对象
        var routerObj=new VueRouter({
            //route 这个配置对象中的route表示[路由匹配规则]的意思
            routes:[//路由匹配规则
            //每个路由规则.都是一个对象,这个规则对象身上有两个必须得属性
            //属性1是path,表示监听哪个路由链接地址
            // 属性2是component表示如果路由是前面匹配到的path,则展示component 属性对应的那个组件
            //注意:component的属性值必须是一个组件的模板对象,不能是组件名称
            {path:'/login',component:login},
            {path:'/register',component:register}
            ]
        })
         var vm=new Vue({
             el:"#app",
             data:{
                
             },
             methods: {
                 
             },
            router:routerObj//将路由规则对象,注册到vm实例上,用来监听URL地址的变化.然后展示对应的组件
         })
    </script>
   
</body>
</html>

二:router-link的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <div id="app">
        <!--不推荐使用 <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->
        <!-- router-link 默认渲染为一个a标签 如果想让它渲染别的标签 加tag即可-->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>

        <router-view></router-view>
    </div>
    <script>
        //组件的模板对象
        var login={
            template:"<h1>登录组件</h1>"
        }
        var register={
        template:"<h1>注册组件</h1>"
        }
        
        /* 组件名称 不能放path里面
        Vue.component('login',{
            template:"<h1>登录组件</h1>"
        })*/
        //创建一个路由对象,当导入vue-router包之后,在window全局对象中,就有了一个路由的构造函数,叫做VueRouter
        //在new路由对象的时候,可以为构造函数传递一个配置对象
        var routerObj=new VueRouter({
            //route 这个配置对象中的route表示[路由匹配规则]的意思
            routes:[//路由匹配规则
            //每个路由规则.都是一个对象,这个规则对象身上有两个必须得属性
            //属性1是path,表示监听哪个路由链接地址
            // 属性2是component表示如果路由是前面匹配到的path,则展示component 属性对应的那个组件
            //注意:component的属性值必须是一个组件的模板对象,不能是组件名称
            {path:'/login',component:login},
            {path:'/register',component:register}
            ]
        })
         var vm=new Vue({
             el:"#app",
             data:{
                
             },
             methods: {
                 
             },
            router:routerObj//将路由规则对象,注册到vm实例上,用来监听URL地址的变化.然后展示对应的组件
         })
    </script>
   
</body>
</html>

三:redirect重定向的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <div id="app">
        <!--不推荐使用 <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->
        <!-- router-link 默认渲染为一个a标签 如果想让它渲染别的标签 加tag即可-->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        //组件的模板对象
        var login={
            template:"<h1>登录组件</h1>"
        }
        var register={
        template:"<h1>注册组件</h1>"
        }
        
        var routerObj=new VueRouter({
            //route 这个配置对象中的route表示[路由匹配规则]的意思
            routes:[//路由匹配规则
            //这里的redirect和Node中的redirect完全是两码事
            //如果是根路径,重新跳转到/login 强制的区展示某个组件
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
            ]
        })
         var vm=new Vue({
             el:"#app",
             data:{
                
             },
             methods: {
                 
             },
            router:routerObj//将路由规则对象,注册到vm实例上,用来监听URL地址的变化.然后展示对应的组件
         })
    </script>
   
</body>
</html>

四:设置路由高亮的两种方式

官方API上有默认类
在这里插入图片描述我们也可以在控制台的Elements上看到,点击哪个组件,这个类就跳到哪个组件身上
在这里插入图片描述

1.第一种方式使用默认类名设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
    <style>
        .router-link-active{
            color: black;
            line-height: 20px;
            text-decoration: none;
            padding: 5px;
            background: #e2214b;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--不推荐使用 <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->
        <!-- router-link 默认渲染为一个a标签 如果想让它渲染别的标签 加tag即可-->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        //组件的模板对象
        var login={
            template:"<h1>登录组件</h1>"
        }
        var register={
        template:"<h1>注册组件</h1>"
        }
        
        var routerObj=new VueRouter({
            //route 这个配置对象中的route表示[路由匹配规则]的意思
            routes:[//路由匹配规则
            //这里的redirect和Node中的redirect完全是两码事
            //如果是根路径,重新跳转到/login 强制的区展示某个组件
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
            ]
        })
         var vm=new Vue({
             el:"#app",
             data:{
                
             },
             methods: {
                 
             },
            router:routerObj//将路由规则对象,注册到vm实例上,用来监听URL地址的变化.然后展示对应的组件
         })
    </script>
   
</body>
</html>

2.通过linkActiveClass全局配置 自定义类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
    <style>
        .myactive{
            color: black;
            line-height: 20px;
            text-decoration: none;
            padding: 5px;
            background: #e2214b;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--不推荐使用 <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->
        <!-- router-link 默认渲染为一个a标签 如果想让它渲染别的标签 加tag即可-->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        //组件的模板对象
        var login={
            template:"<h1>登录组件</h1>"
        }
        var register={
        template:"<h1>注册组件</h1>"
        }
        
        var routerObj=new VueRouter({
            //route 这个配置对象中的route表示[路由匹配规则]的意思
            routes:[//路由匹配规则
            //这里的redirect和Node中的redirect完全是两码事
            //如果是根路径,重新跳转到/login 强制的区展示某个组件
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
            ],
            linkActiveClass:'myactive'
        })
         var vm=new Vue({
             el:"#app",
             data:{
                
             },
             methods: {
                 
             },
            router:routerObj//将路由规则对象,注册到vm实例上,用来监听URL地址的变化.然后展示对应的组件
         })
    </script>
   
</body>
</html>

五:为路由切换启动动画

因为无论是登录还是注册最终都是在router-view里来展示,所以可以用transition将它包裹起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
    <style>
        .myactive{
            color: black;
            line-height: 20px;
            text-decoration: none;
            padding: 5px;
            background: #e2214b;
        }
        .v-active,.v-leave-to{
            opacity: 0;
            transform:translateX(140px)
        }
        .v-enter-active,.v-leave-active{
            transition:all 0.5s ease
        }
    </style>
</head>
<body>
    <div id="app">
        <!--不推荐使用 <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->
        <!-- router-link 默认渲染为一个a标签 如果想让它渲染别的标签 加tag即可-->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>
        <transition mode="out-in">
         <router-view></router-view>
        </transition>
       
    </div>
    <script>
        //组件的模板对象
        var login={
            template:"<h1>登录组件</h1>"
        }
        var register={
        template:"<h1>注册组件</h1>"
        }
        
        var routerObj=new VueRouter({
            //route 这个配置对象中的route表示[路由匹配规则]的意思
            routes:[//路由匹配规则
            //这里的redirect和Node中的redirect完全是两码事
            //如果是根路径,重新跳转到/login 强制的区展示某个组件
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
            ],
            linkActiveClass:'myactive'
        })
         var vm=new Vue({
             el:"#app",
             data:{
                
             },
             methods: {
                 
             },
            router:routerObj//将路由规则对象,注册到vm实例上,用来监听URL地址的变化.然后展示对应的组件
         })
    </script>
   
</body>
</html>

六:路由传参

1.使用query方式传递参数

控制台输入vm.我们可以看到vm实例的参数,在$route里可以看到query里面有我们要查询的,如果忘了怎么拿可以通过这个方式查看
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
    <style>
        .myactive{
            color: black;
            line-height: 20px;
            text-decoration: none;
            padding: 5px;
            background: #e2214b;
        }
        .v-active,.v-leave-to{
            opacity: 0;
            transform:translateX(140px)
        }
        .v-enter-active,.v-leave-active{
            transition:all 0.5s ease
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 如果在路由中,使用查询字符串, 给路由传递参数,则不需要修改路由规则的path属性-->
        <router-link to="/login?id=10&name=xx">登录</router-link>
        <router-link to="/register">注册</router-link>
    <router-view></router-view>
    </div>
    <script>
     var login={
         template:"<h1>登录---{{msg}}---{{$route.query.id}}---{{$route.query.name}}</h1>",
       data(){
           return {
            msg:'ss'
           }
       },
         created(){ //组件的生命周期钩子函数
        //  console.log(this.$route);
        console.log(this.$route.query.id);
        console.log(this.$route.query.name);
         }
     }
     var register={
         template:"<h1>注册</h1>"
     }
        var router=new VueRouter({
            routes:[
            {path:'/login',component:login},
            {path:'/register',component:register}
            ]
        })
      
         var vm=new Vue({
             el:"#app",
             data:{
                
             },
             methods: {
                 
             },
             // 简写router:router
             router
           
         })
    </script>
   
</body>
</html>

2.通过params方式传参

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>
   <div id="app">
       <router-link to="/login/12/xx">登录</router-link>
       <router-link to="/register">注册</router-link>
    <router-view></router-view>
   </div>
<body>

    <script>
        
        var login={
            template:'<h1>登录---{{$route.params.id}}---{{$route.params.name}}</h1>',
            created() {
                // console.log(this.$route.params.id)
            },
        }
        var register={
         template:'<h1>注册</h1>'
        }
        var router=new VueRouter({
        routes:[
            {path:'/login/:id/:name',component:login},
            {path:'/register',component:register}
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            },
            // 简写router:router
            router

        })
    </script>

</body>

</html>

七.使用children属性实现路由嵌套

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/account">Account</router-link>
         <router-view></router-view>
    </div>
    <template id="tmp1">
        <div>
            <h1>这是Account组件</h1>
            <router-link to="/account/login">登录</router-link>
            <router-link to="/account/register">注册</router-link>
            <!-- 登录和注册都属于这个account里的,所以再加一个router-view,这样才显示得出来 -->
            <router-view></router-view>
        </div>
    </template>
    <script>
       var account={
           template:'#tmp1'
       }
       var login={
           template:"<h3>登录</h3>"
       }
       var register={
           template:"<h3>注册</h3>"
       }
       var router=new VueRouter({
           routes:[
               {path:'/account',component:account,
               children:[
                   {path:'login',component:login},
                   {path:'register',component:register}
               ]}
               ]
       })
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            },
            // 简写router:router
            router,
        })
    </script>

</body>

</html>

八:命名视图实现经典布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <!-- 安装vue-router路由模块 -->
    <script src="../lib/vue-router-3.0.1.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        h1 {
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: khaki;
            height: 80px;
        }
        .container{
            height: 400px;
            display: flex;
        }
        .left{
            background-color:darkmagenta;
            flex: 2;
        }
        /* 设置flex之后 left占2/10,main占8/10 */
        .main{
            background-color:honeydew;
            flex: 8;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-view></router-view>
        <div class="container">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>
    <script>
        var header = {
            template: "<h1 class='header'>我是头部</h1>"
        }
        var leftBox = {
            template: "<h1 class='left'>Left侧边栏区域</h1>"
        }
        var mainBox = {
            template: "<h1 class='main'>mainBox主题区域</h1>"
        }
        var router = new VueRouter({
            routes: [{
                path: '/',
                components: {
                    "default": header, //default是默认的意思
                    "left": leftBox,
                    "main": mainBox
                }
            }]
        })
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            },
            // 简写router:router
            router
        })
    </script>

</body>

</html>

猜你喜欢

转载自blog.csdn.net/x1037490413/article/details/107345895
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022