// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import A from '../components/A'
import B from '../components/B'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/urlA',
			component:A
		},
		{
			path:'/urlB',
			component:B
		}
	]
})

第二步在main.js中引入和应用 router

//引入路由器

import router from ‘./router’

//应用插件

Vue.use(VueRouter)

第三步在Vue中通过两个标签进行配置

<!– Vue中借助router-link标签实现路由的切换 –>

<router-link to=”/urlA”>A组件</router-link>

<router-view></router-view>

当点击上面的 router-link 标签时，router-view标签所在的位置就会被替换为 A.vue

跳转路由时的参数传递

通过 router-link 中得到to属性传参

有两种写法，一种是用过 params 一种是 query

query

query的写法有两种，一种是字符串直接传递一种是对象写法

<li v-for="m in messageList" :key="m.id">
        <!-- 跳转路由并携带query参数，to的字符串写法  模板字符串 加 `` 里面用$ 来提取变量 -->
        <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{
          m.title
        }}</router-link
        >&nbsp;&nbsp;

        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
        >
          {{ m.title }}
        </router-link>
      </li>

params

也是两种写法

需要注意的是 params 的对象写法中不能使用path ，只能使用命名路由name属性。

<li v-for="m in messageList" :key="m.id">
				<!-- 跳转路由并携带params参数，to的字符串写法 -->
				<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;

				<!-- 跳转路由并携带params参数，to的对象写法 -->
				<router-link :to="{
					name:'xiangqing',
					params:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>
			
			</li>

在跳转后的vue中可以通过下面的表达式取出传递的参数