vue中路由的基本使用

创建步骤：
1 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）

 <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 创建路由new VueRouter(),接受的参数是一个对象

  const router = new VueRouter({
    
    }）

3 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4 path属性是url的地址,component属性就是显示的组件（传组件的对象）

 const router = new VueRouter({
    
    
            // 3、创建映射关系
            routes: [
                // 路由的重定向
                {
    
    
                    path: '/', //路径
                    redirect: '/index' //组件
                },)

5 创建的路由需要和vue实例关联一下

 const vm = new Vue({
    
    
 		//创建的路由需要和vue实例关联一下
            // router: router,
            router,
            el: '#app',
            data: {
    
    
            },
            methods: {
    
    
            }
        })

6 路由到的组件显示在哪个位置

<div id='app'>
<router-view></router-view>
</div>