Creation steps:
1. Introduce the js file. This js needs to be placed behind the vue js and automatically installed (a VueRouter construction method is provided)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 1 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法） -->
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
2 Create route new VueRouter(), the accepted parameter is an object
const router = new VueRouter({
}）
3 Configure the attribute routes:[] in the instantiated object. The object in this array contains the path attribute and the component attribute.
4 The path attribute is the address of the url, and the component attribute is the displayed component (the object passing the component)
const router = new VueRouter({
// 3、创建映射关系
routes: [
// 路由的重定向
{
path: '/', //路径
redirect: '/index' //组件
},)
5 The created route needs to be associated with the vue instance
const vm = new Vue({
//创建的路由需要和vue实例关联一下
// router: router,
router,
el: '#app',
data: {
},
methods: {
}
})
6 Where is the routed component displayed?
<div id='app'>
<router-view></router-view>
</div>