1.在idea中新建vue项目
2.main.js中修改
import Vue from 'vue'
// import Router from './Router' /*引用自同级Router.js*/
// import Router from './SonRouter' /*引用自同级SonRouter.js*/
// import Router from './ComponentRouter' /*引用自同级ComponentRouter.js*/
import Router from './UrlRouter'
3.src下新建文件UrlRouter.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:'/'},
{path:'/params/:aaa/:bbb'}, // :表示绑定的意思
{path:'/parame-regex/:id(\\d+)'} //正则表达式绑定,只能是数字的时候生效,字母不起作用
]
})
new Vue({
router,
template:`
<div> <!--必须有外层根div-->
<h1>Good Morning</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/params/111/222">/params/111/222</router-link></li>
<li><router-link to="/parame-regex/222">/parame-regex/222</router-link></li>
</ul>
<p>Show</p>
<pre><code>
{{$route.params.aaa}}
{{$route.params.id}}
{{JSON.stringify($route,null,2)}}
</code></pre>
</div>
`
}).$mount('#app')
运行结果: