vue路由器,初学这样写,不知道错哪了?? 5C

vue路由器,初学这样写,不知道错哪了??

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="list-group">
            <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
            <a class="list-group-item" v-link="{ path: '/about'}">About</a>
        </div>
        <router-view></router-view>
    </div>
</body>
<script>
    var Home = Vue.extend({
        template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
        data: function() {
            return {
                msg: 'Hello, vue router!'
            }
        }
    })

    var About = Vue.extend({
        template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
    })
    var router = new VueRouter({
        routes:[
        { path: '/home', component: Home },
        { path: '/about', component: About }
        ]

    });
    new Vue({
        el:"#app",
        router
    })
</script>
</body>
</html>

3个回答

配置
      const router = new VueRouter({
      // router
      routes:[
        {
          path:'/hello',
          component:HelloWorld
        }
      ]
    })
注入
    new Vue({
      el: '#app',
      router, // 注入
      components: { App }, 
      template: '<App/>'
    })

你的错误代码我已经注释掉了,上面是正确的代码

<body>
    <div id="app">
        <div class="list-group">
          <router-link :to="{path: '/home'}">Home</router-link>
          <router-link :to="{path: '/about'}">About</router-link>
            <!-- <a class="list-group-item" v-link="{ path: '/home'}">Home</a> -->
            <!-- <a class="list-group-item" v-link="{ path: '/about'}">About</a> -->
        </div>
        <router-view></router-view>
    </div>
</body>

需要使用router-link标签

具体语法可以到官网上查看:地址,下面是相关内容的截图

图片说明

需要router-link标签
将a标签改为

<router-link to="about">about</router-link>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!