Vue路由

最新推荐文章于 2024-08-30 20:29:15 发布

a188891455

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量60

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xhpcc/p/11399128.html

版权

路由思路
1、确保引入Vue.vue-router的js依赖

<script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.js"></script>

2、首先需要定义组件（就是展示不同的页面效果）

 const Home = Vue.extend({
            template: '<div> <p>首页</p> <div>博主博客内容</div></div>'
        });

        const Abort = Vue.extend({
            template: '<div><p>关于本站</p><div>博主信息</div></div>'
        });

3、需要将不同的组件放入一个容器中（路由集合）

 let routes =[
            {
                path:'/',
                component:Home
            },
            {
                path:'/Home',
                component:Home
            },
            {
                path:'/Abort',
                component:Abort
            }
        ]

4、将路由集合组装成路由器

5、将路由挂载到Vue实例中

  let router= new VueRouter({routes})    
            new Vue({
                el:'#app' ,
                router,
                data:{
                    msg:'hello vue!!'
                }
            })

6、定义锚点

     <router-link to="/Home" replace>首页</router-link>
                <router-link to="/Abort">关于本站</router-link>

7、跳转

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <title>vue路由</title>
            <script src="https://cdn.bootcss.com/vue/2.6.9/vue.js"></script>
            <script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.js"></script>
        </head>
        <body>
            <div id="app">
                <router-link to="/Home" replace>首页</router-link>
                <router-link to="/Abort">关于本站</router-link>
                <router-view></router-view>
            </div>
        </body>
        <script type="text/javascript">
            //创建主键
            const Home = Vue.extend({
            template: '<div> <p>首页</p> <div>博主博客内容</div></div>'
        });

        const Abort = Vue.extend({
            template: '<div><p>关于本站</p><div>博主信息</div></div>'
        });
        //添加url与组件d的映射关系(）组合路由)
        let routes =[
            {
                path:'/',
                component:Home
            },
            {
                path:'/Home',
                component:Home
            },
            {
                path:'/Abort',
                component:Abort
            }
        ]
        //将路由的集合组合成路由器
        let router= new VueRouter({routes})    
            new Vue({
                el:'#app' ,
                router,
                data:{
                    msg:'hello vue!!'
                }
            })
        </script>
    </html>

结果：

消除记录：

添加代码：replace

转载于:https://www.cnblogs.com/xhpcc/p/11399128.html

a188891455

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue路由

路由思路1、确保引入Vue.vue-router的js依赖<script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.js"></script>2、首先需要定义组件（就是展示不同的页面效果） const Home = Vue.extend({ ...
复制链接

扫一扫