Vue路由 router-编程式 leve3

最新推荐文章于 2024-03-19 16:38:11 发布

Abinhere

最新推荐文章于 2024-03-19 16:38:11 发布

阅读量146

点赞数

分类专栏：浅谈vue-router路由文章标签： vue vue.js html javascript

本文链接：https://blog.csdn.net/weixin_42390302/article/details/108875266

版权

浅谈vue-router路由专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue路由 router-编程式 leve3

先点击一下搜索然后再点击一下‘跳转到second即可看到效果’ 话不多说咱们直接上代码，老规矩你想知道的我都在注释中标明了，聪明的你肯定一看就懂！

<!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="/node_modules/vue/dist/vue.js"></script>
    <script src="/node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        .active{
            font-weight: 600;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <router-link tag="li" to="/position" active-class="active">一级菜单1</router-link>
            <router-link tag="li" to="/search" active-class="active">一级菜单2</router-link>
        </ul>
        <router-view></router-view>
        <!-- 定义一个方法 -->
        <button @click="goLink">跳转到second</button>
    </div>
    <script>
        const position = {
            template:`
                <div>
                    <router-link to="/position/first" active-class="active">二级菜单1</router-link>
                    <router-link to="/position/second" active-class="active">二级菜单2</router-link>
                    <router-view></router-view>
                </div>
            `
        }
        const search = {
            template:`
                <div>search</div>
            `
        }
        /* 这里配置我们的路由 */
        let router = new VueRouter({
            // mode:'hash',默认值
            //路由匹配一般会按顺序从上往下匹配
            routes:[
                {//这里也可以配置一下
                    path:'/',
                    redirect:'/position/second',
                },
                {
                    path:'/position',
                    component:position,
                    redirect:'/position/second',
                    children:[
                        {
                            path:'/position/first',
                            component:{
                                template:'<div>first</div>'
                            }
                        },
                        {
                            path:'/position/second',
                            name:'secondcc',//命名式路由 这个name用作标识 可以随便起
                            component:{
                                template:'<div>second</div>'
                            }
                        },
                    ]
                },
                {
                    path:'/search',
                    component:search
                },
                {
                    path:'*',//匹配一个404页,就是上面路由均匹配不到时
                    component:{
                        template:`
                            <h1>404 page not found!</h1>
                        `
                    }
                }
            ]
        })

        let vm = new Vue({
            router,
            el:'#app',
            methods:{
                goLink(){
                    // this.$router.push('/position/second')
                    // this.$router.push({
                    //     path:"/position/second"
                    // })

                    //命名式路由
                    // this.$router.push({
                    //     name:"secondcc"
                    // })

                    //也可以这么写
                    router.push({
                        name:"secondcc"
                    })
                }
            }
        })
    </script>
</body>
</html>

Abinhere

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue路由 router-编程式 leve3

Vue路由 router-编程式 leve3先点击一下搜索然后再点击一下‘跳转到second即可看到效果’ 话不多说咱们直接上代码，老规矩你想知道的我都在注释中标明了，聪明的你肯定一看就懂！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
复制链接

扫一扫