Vue_路由的基本使用步骤

路由

1.理解：一个路由（route）就是一组映谢关系（key - value）,多个路由需要路由器（router）进行管理。

2.前端路由：key是路径，value是组件

 1.基本使用

1.安装vue-router,命令：npm i vue-router

2.在main.js文件中引入并应用插件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false

//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

3.在src下创建一个router / index.js 文件，用于创建整个应用的路由器，编写router配置项

// 该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

 4.组件中实现跳转

//to后面写 跳转的路径
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>

//跳转页面后的内容展示放在哪里就行代码写在哪里
<router-view></router-view>

几个注意点

• pages:存放路由组件
• components:存放一般组件
• router:该文件专门用于创建整个应用的路由器
• 通过切换，“隐藏了的路由组件，默认是被销毁，需要的时候再去挂载”
• 整个组件都有自己的$routr属性，里面存储着自己的路由器信息
• 整个应用只有一个router,可以通过组件的$router属性获取到

3.多级路由

1.配置路由规则，使用childern配置项

	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[  //通过children配置子级路由
				{
					path:'news',//此处一定不要写：/news
					component:News,
				},
				{
					path:'message',
					component:Message,
					children:[
						{
							path:'detail', //此处一定不要写：/detail
							component:Detail,
						}
					]
				}
			]
		}
	]
})

2.跳转要写完整路径

<router-link  to="/home/message/</router-link>

4.路由的query参数

1.传递参数

//跳转路由并携带query参数，to的字符串写法 
 <router-link :to="/home/message/detail?id=6666&title=你好">跳转</router-link>&nbsp;&nbsp;				 
 
//跳转路由并携带query参数，to的对象写法
<router-link 
     :to="{
		  path:'/home/message/detail',
		  query:{
			id:666,
			title:'你好'		
			}
		}"
>跳转</router-link>

2.接收参数

$route.query.id
$route.query.title

5.命名路由

1.作用：简化路由的跳转

2.如何使用

         1.给路由命名

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			name:'guanyu',  //给路由命名
			path:'/about',
			component:About
		},
		{
			path:'/home', //给路由命名
			component:Home,
			children:[
				{
					path:'news', 
					component:News,
				},
				{
					path:'message',
					component:Message,
					children:[
						{
							name:'xiangqing', //给路由命名
							path:'detail',
							component:Detail,
						}
					]
				}
			]
		}
	]
})

 2.简化跳转

//简化前，需要写完整路径
<router-link to="/demo/test/hello">跳转</router-link>


//简化后，直接通过名字跳转
<router-link ：to="{name:'guanyu'}">跳转</router-link>

//简化写法搭配传递参数
<router-link 
    ：to="{
        name:'guanyu',
        query:{
           id:666,
           title:'你好，我是传递的数据，请你接收'
         }
    }"
>跳转</router-link>