vue的路由入门，Vue入门

一、基础静态路由

1、引入路由依赖

//引入VueRouter
import VueRouter from 'vue-router'

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
})

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

// 该文件专门用于创建整个应用的路由器
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
		}
	]
})

3、main.js引用上面那个文件

//引入路由器
import router from './router'

4、点击使用路由

<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
 <br>
 <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

5、路由展现位置

<router-view></router-view> 

6、其他

• 如果是vue2请安装3版本的路由，不然可能会报警告或者报错

npm i vue-router@3

1. 嵌套路由，路由下写路由
2. 命名路由，简化路由的跳转，使用":"

作者demo举例

<router-link to="/demo/test/welcome">跳转</router-link>

简化后

<router-link :to"{name:'hello'}">跳转<router-link>

3. 简化配合传递参数

<router-link 
		:to="{
		name:'hello',
		query:{
		id:666,
		title:'你好'}
		}">跳转<router-link>

4. js调用方法，直接跳转到/Enpty

    this.$router.replace({
      path:'/Empty'
     //name: ''
    })

7、新人常见错误

成功了会有一个#号

二、嵌套路由（子路由）

• news 就是home的子路由，完整的路由路径为/home/news，子路由前缀不能有 / 号不然会出错。

		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
					children:[
						{
							path:'detail',
							component:Detail,
						}
					]
				}
			]
		}

三、路由传递参数

• 父路由组件（发送数据），发送的为query

				<router-link :to="{
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>

• 子路由组件（接收数据），通过$route就能直接获取到数据

<template>
	<ul>
		<li>消息编号：{{$route.query.id}}</li>
		<li>消息标题：{{$route.query.title}}</li>
	</ul>
</template>

四、命名路由

• 目的：当路径过长的时候，方便书写代码
• 定义，比如 /about 被命名为 guanyu

	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,
						}
					]
				}
			]
		}
	]

• 使用，浏览器上显示的依旧是 /about，同时要注意 ‘guanyu’ 两边的单引号不能改成双引号。

<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>