美文网首页
#前端开发工程师

#前端开发工程师

作者: 指尖核心 | 来源:发表于2017-07-11 22:22 被阅读0次

Vue.js路由

@(示例)[帮助]

简介

HTML代码

<div id="div">
    <h1>Vue 路由</h1>
    <p>
        <router-link to="/user/yh1">进入</router-link>
        <router-link to="/user/yh2">跳转</router-link>
    </p>
    <router-view></router-view>
</div>

js代码

<script>

    const User = {
        template:`
        <div>
        {{$route.params.id}}
        <h1>欢迎进入</h1>
        <h2>Vue 路由</h2>
</div>
        `
    }

    const routes = [
        {path:"/user/:id",component:User}
    ]

    const router = new VueRouter({
        routes
    })
     new Vue({
        router
    }).$mount("#div")
</script>

相关文章

网友评论

      本文标题:#前端开发工程师

      本文链接:https://www.haomeiwen.com/subject/vaqvhxtx.html