vue-router

学习官网：https://router.vuejs.org/zh/

cdn下载链接v-router下载网址：https://unpkg.com/vue-router/dist/vue-router.js

vue-router的简单使用：

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router简单使用</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div id="app">

<!-- 使用router时下面这个标签相当于a标签直接可以找到对应路径-->

<router-link to="/home">首页</router-link>

<router-link to="/course">课程页面</router-link>

<!--    组件展示出口，link找到的组件在组件出口展示-->

<router-view></router-view>

</div>
</body>

<script>
Vue.use(VueRouter);

    let Home = {
    data(){
        return{}
    },
    template:`
    &lt;div class=&quot;home&quot;&gt;
    &lt;h1&gt;home页面&lt;/h1&gt;

</div>`,

};
    let Course = {
        data(){
            return{}
        },
        template:`
        &lt;div class=&quot;course&quot;&gt;
        &lt;h1&gt;course页面&lt;/h1&gt;
    &lt;/div&gt;`,
        };

    let router = new VueRouter({
        mode:&#39;history&#39;,
        routes:[
            {path:&#39;/home&#39;,component:Home},   //vue-router中router-view跳转的路径，
            {path:&#39;/course&#39;,component:Course}
    ]
    });

let vm = new Vue({
    el:&quot;#app&quot;,
    //挂载vue-router规则
    router,
    data(){
        return{}
    },


})

</script>
</html>

posted @ 2020-01-23 10:45 赌徒! 阅读(84) 评论(0) 收藏举报

刷新页面返回顶部

vue-router

vue-router

vue-router的简单使用：

公告