极客观点
项目管理
HarmonyOS
多谢您的回答，采纳后有赞赏 10 元。
<body>
<div id="app">
<!--<a href="#/news">新闻资讯</a>
<a href="#/share">图片分享</a>-->
<router-link to="/news/15">新闻资讯</router-link>
<router-link to="/share">图片分享</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
//组件 新闻资讯
var news = Vue.component('my-news', {
data() {
return {
id: -1
}
},
//当组件创建完毕之后
当组件创建完毕之后，为什么路由跳到这里来了，并且能够获取到路由参数？
created() {
//获取路由参数
this.id = this.$route.params.id
},
template: '<p>我是新闻资讯列表 {{id}}</p>'
})
//组件 图片分享
var share = Vue.component('my-share', {
template: '<p>我是图片分享的列表</p>'
})
//创建路由
var router = new VueRouter({
routes: [
{name: 'news', path: '/news/:id', component: news},
{name: 'share', path: '/share', component: share}
]
})
var vm = new Vue({
el: '#app',
//使用路由对象
router: router
})</script>
</body>
html5
为什么先创建组件？
路由就是用来控制每个页面显示哪个组件，所以必须先有组件它才能控制。
为什么创建路由，其次才是创建 Vue 实例？
这里是用一个 Vue 实例作为主入口，通过
router: router注入路由，从而让整个应用都有路由功能。这个过程是 vue-router 在背后搞定的，它会将$router和$route注入到每个子组件中。创建路由就像填电话本，告诉 vue-router 遇到什么样的路径要跳到哪个组件。
为什么路由跳到这里来了，并且能够获取到路由参数？
<router-link to="/news/15">新闻资讯</router-link>会生成一个 a 标签，点击之后 vue-router 会帮你跳转到对应组件，你在创建路由的时候用了动态匹配'/news/:id',那么这个15就可以在子组件中用this.$route.params.id获取到。