vue router__0">vue -router>vue -router 路由基本使用
参考: https://router.vue js.org/zh-cn/essentials/getting-started.html 用 Vue.js + vue -router>vue -router 创建单页应用,使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue -router>vue -router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue -router>vue -router 在哪里渲染它们。下面是个基本例子:
HTML
< div id = " app" >
< router-link to = " /goodList" > 商品列表</ router-link>
< router-link to = " /newsList" > 新闻早知道</ router-link>
< br>
< router-view> </ router-view>
</ div>
< template id = " goodList" >
< ul>
< li>
< router-link to = " /goodDetail/0001" > 苹果</ router-link>
</ li>
< li>
< router-link to = " /goodDetail/0002" > 草莓</ router-link>
</ li>
< li> 香蕉</ li>
</ ul>
</ template>
引入文件
< script src= "https://cdn.bootcss.com/vue /2.5.13/vue .js" > < / script>
< script src= "https://cdn.bootcss.com/vue -router>vue -router/3.0.1/vue -router>vue -router.js" > < / script>
JavaScript
< script>
const goodListComponent = {
template: '#goodList'
}
const newListComponent = Vue. extend ( {
template: '<ul><li>美院开考学生跪拜</li><li>中国最好大学排名</li><li>90后春节被掏空</li></ul>'
} )
const goodDetialComponent = {
template: '<div>啦啦啦, 我是商品详情... {{$route.params.goodId}} </div>'
}
const router = new VueRouter ( {
routes: [
{ path: '/' , redirect: '/goodList' } ,
{ path: '/goodList' , component: goodListComponent} ,
{ path: '/newsList' , component: newListComponent} ,
{ path: '/goodDetail/:goodId' , component: goodDetialComponent}
]
} )
const vm = new Vue ( {
router
} ) . $mount ( '#app' )
< / script>