提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue路由

Vue路由
2023-06-13 09:12:14 时间

路由根据不同url展示对应的组件

路由使用

1.下载vue-router

2.实例VueRouter对象

3.配置路由

4.将路由注册到vm对象

5.页面使用<router-link></router-link>和<router-view></router-view>

简单示例

//s1定义组件
var login = {
            template:"<h1>登录</h1>"
        }
        var reg = {
            template:"<h1>注册</h1>"
        }
//s2.示例Router对象并配置路由
    var router = new VueRouter({
        routes:[
            {
                path:'/log',
                component:login
            },
            {
                path:'/reg',
                component:reg
            }
        ]
    })
    //s3.注册路由
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{},
            router
        })
//s4.页面显示
<div id="app">
        <router-link to="/log">登录</router-link>
        <router-link to="/reg">注册</router-link>//路由链接
        <router-view></router-view>//不同组件展示区域
    </div>

路由高亮

VueRouter为我们提供了路由高亮类，默认为router-link-active我们可以为此类编写样式，时当前被点击的链接高亮显示 我们还可以自定义高亮类，只需在示例化路由时配置即可

new VueRouter({
    routes:[
        {path:"/",component:},
    ],
     linkActive:"myactive"
})

路由参数

路由可接收queryString参数，如下示例

<router-link to="/link/10/tzh" ></router-link>//路由传参

new VueRouter({
    routes:[
        {path:"/login/:id/:name",component:}//定义路由参数
    ]
})

//接收参数
this.$route.params.参数名

路由嵌套

new VueRouter({
    routes:[
        {
        path:"/login/:id/:name",
        component:login
        //子路由
        children:[
            {path,component},
            {path,component}
        ]
        }
    ],
})

命名视图

不同的组件展示到不同区域

new VueRouter({
    routes:[
        {
        path:"/login/:id/:name",
        component:{
        default:header,//默认视图
        left:leftbox
        right:rightbox
        }
        }
    ],
    

})
<router-view ></router-view>//展示默认视图
<router-view name="left"></router-view>
<router-view name="right"></router-view>

相关文章