vue - router

最新推荐文章于 2024-06-28 16:20:01 发布

ㄗòs╃牸架

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量484

点赞数

分类专栏： vue html javascript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Drunk_Invader/article/details/124016798

版权

javascript 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

html

27 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

一、路由

router-link实现页面跳转 to书写路径，自己定义，前面一定要有
router-link最终渲染成了a标签，但是不能直接书写a标签。
当前点击的router-link默认会有一个类名router-link-exact-active router-link-active
router-view渲染页面跳转内容

    <body>
        <div id="app">
            <router-link to="/index">首页</router-link>
            <router-link to="/my">我的</router-link>
            <router-view></router-view>
        </div>
        <template id="index">
            <h1>这是首页</h1>
        </template>
        <template id="my">
            <h1>这是我的</h1>
        </template>
        <script src="js/vue.js"></script>
        <!-- 使用的是按需引入的方式 -->
        <script src="js/vue-router.js"></script>
        <script>
            // 定义组件
            var index={
                template:'#index'
            }
            var my={
                template:'#my'
            }
            //配置路由
            var router=new VueRouter({
                // routes配置路线
                routes:[
                    {
                        // path和router-link的to对应
                        path:'/index',
                        // component对应的就是路由的组件
                        component:index
                    },
                    {            
                        path:'/my',
                        component:my
                    }
                ]
            })
            new Vue({
                el:'#app',
                // 挂载路由
                router:router
            })
        </script>
    </body>

二、spa

spa:单页面开发，只有一个页面，一个html,之前实现页面跳转使用a标签，但是现在只有一个html页面，没有办法使用a，所以有了路由的概念

三、路由的嵌套

那个路由中的子路由通过该路由中的router-view进行渲染
配置子路由,内容会渲染到index组件内部的router-view内部，如果没有router-view会不渲染
redirect重定向重新定位到某一个路径，此处的路由配置，一般放置在最后。如果放在上面的话，下面的代码都不会再执行

    <body>
        <div id="app">
         
        </div>
        <template id="index">
            <main>
                <router-link to="/miao">苏宁秒杀</router-link>
                <router-link to="/market">苏宁超市</router-link>
                <router-view></router-view>
            </main>
        </template>
        <template id="my">
            <h1>我的</h1>
        </template>
        <template id="miao">
            <h1>苏宁秒杀</h1>
        </template>
        <template id="market">
            <h1>苏宁超市</h1>
        </template>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <script>
            var index={
                template:'#index'
            }
            var my={
                template:'#my'
            }
            var miao={
                template:'#miao'
            }
            var market={
                template:'#market'
            }
            var router=new VueRouter({
                routes:[
                    {
                        path:'/index',
                        component:index,
                        children:[
                             {
                                path:'/market',
                                component:market
                            },
                            {
                                path:'/miao',
                                component:miao
                            }
                        ]
                    },
                    {
                        path:'/my',
                        component:my
                    },
                    {
                        path:'/*',
                        redirect:'/miao'
                    }
                ]
            })
            new Vue({
                el:'#app',
                router:router
            })
        </script>
    </body>

四、路由传参

第一种传参方式：

第一步：通过url拼接路径 :to="路径?k=v&k=v" k属性 v传递参数

第二步：接收的时候通过this.$route.query接收参数一般是在mounted内部接收参数

第二种传参方式

第一步：:to="路径+参数"

第二步：在routes内部配置path的时候 "路径/:参数名(可以任意设置)"

第三步：在接收参数的时候 this.$route.params.参数 mounted(){接收参数}

this.$router.replace()替换页面