Vue-router

最新推荐文章于 2022-09-06 17:55:52 发布

吃瓜的阳大王

最新推荐文章于 2022-09-06 17:55:52 发布

阅读量79

点赞数

文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/qq_44822110/article/details/104802207

版权

Vue-router

<router-link to="/"

<router-view

var router = new VueRouter

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-router</title>

</head>

<body>
    <div id="app">
        <div>
        // <router-link to="/"> to后面就是要跳转的path
            <router-link to="/">首页</router-link>
            <router-link to="/about">关于我们</router-link>
        </div>
        <div>
        //JS返回的数据显示的位置
            <router-view></router-view>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS

// 直接在数组中以对象的方式定义规则(组件)[{path:'',component{}},{path:'',component{}}]
var routes = [{
        path: '/',
        component: {
            template: '<div><h1>首页</h1></div>'
        },

    },
    {
        path: '/about',
        component: {
            template: '<div><h1>关于我们</h1></div>'
        }
    },
]


var router = new VueRouter({
//让router 属性routes 等于上面的routes[]
    routes: routes
})

new Vue({
    el: '#app',
    //让 Vue里面的router 等于上面实例化的router
    router: router
})

吃瓜的阳大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-router

Vue-router<router-link to="/"<router-viewvar router = new VueRouterHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp...
复制链接

扫一扫