代码
提交代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <div> <router-link to="/">首页</router-link> </div> <router-view></router-view> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script type="text/javascript"> const Detail = Vue.component('detail', { template: '<div>这是 {{$route.params.name}} 的详情页面</div>' }) const Article = Vue.component('myArticle', { template: `<ul> <li> <router-link :to="{name: 'detail', params: {name: 'Vue 计算属性的学习'}}"> 1. Vue 计算属性的学习 </router-link> </li> <li> <router-link :to="{name: 'detail', params: {name: 'React 基础学习'}}"> 2. React 基础学习 </router-link> </li> </ul>` }) const routes = [ { path: '/detail/:name', name: 'detail', component: Detail }, { path: '/', component: Article } ] const router = new VueRouter({ routes: routes }) var vm = new Vue({ el: '#app', router: router, data() { return {} } }) </script> </html>
运行结果