07-1-路由的基本配置

最新推荐文章于 2022-04-06 18:07:22 发布

Y__C__X

最新推荐文章于 2022-04-06 18:07:22 发布

阅读量141

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41197830/article/details/118979240

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--    vue路由跳转的原理,通过切换显示不同组件,来达到跳转页面的效果 所以我们叫他单页面-->
    <!--路由跳转的组件-->
    <!--路由跳转/入口的组件-->
    <!--<router-link></router-link>-->
    <!--路由出口的组件-->
    <!--<router-view></router-view>-->

    <router-link to="/">首页</router-link>
    <router-link to="/details">详情行页</router-link>
    <router-link to="/user">用户页</router-link>
    <!--如果不设置路由出口 则无法显示内容-->
    <main>
    <router-view></router-view>
    </main>
</div>
<script>
    //第一步:定义路由跳转组件
    var Home = {
        template: `<div clas="home"><h1>这是首页</h1>
</div>`
    }
    var Details = {
        template: `<div clas="details"><h1>这是详情页</h1></div>`
    }
    var User = {
        template: `<div clas="user"><h1>这是用户页</h1></div>`
    }
    //第二步:定义路由跳转地址,组件根据什么地址跳转
    var routes = [
        {
            // '/'表示根节点路径,页面最初显示的路径
            path: '/', //路由跳转的地址
            component: Home //当前路由跳转的组件
        },
        {
            path: '/details',
            component: Details
        },
        {
            path: '/user',
            component: User
        }
    ]
    //第三步:创建一个路由对象,将定义好的路由路径 挂载到路由实例上
    var router = new VueRouter({
        //将配置好的路由地址赋值给VueRouter的路由对象route
        // routes: routes
        routes //es6简写
    })

    new Vue({
        el: "#app",
        //第四步:将配置好的路由对象 挂在到vue实例上使用
        //router:router,
        router,
        data: {}
    })
</script>
</body>
</html>

Y__C__X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07-1-路由的基本配置

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> <script src="../js/vue-router.js"></script></head>.
复制链接

扫一扫