Vue中的路由

VueRouter的使用步骤：

        1.引入js文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		    <!--  1 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法） -->
		<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

        2.创建路由new VueRouter(),接受的参数是一个对象

const router = new VueRouter({
				}

        3.在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性

                （path属性是url的地址,component属性就是显示的组件（传组件的对象））        

	const router = new VueRouter({
				routes:[
					//路由的重定向
					{
						path : '/',
						redirect: '/index'
					},
					{
						path : '/index',
						component: index
					},
					{
						path: '/detail',
						component: detail
					},
				]
			})

        4.定义路由组件

<template id='index'>
			<div>
				首页
				<router-link to="/detail">去详情</router-link>
			</div>
		</template>
let index={
				template:'#index',
				
			}

        5.挂载到vue实例上

const vm=new Vue({
				router,
				el:'#root',
				data:{
					
				},
				
				methods:{
					
				}
			})

        6.路由到的组件显示在哪个位置<router-view></router-view> -->

        

<div id="root">
			<router-view></router-view>
		</div>