vue-router的详细安装及配置

目录

1、安装路由，

2、 引入并配置路由

3、 路由的视图展示

4、 路由跳转方式以及传递参数

5、路由组件独有的两个钩子函数(也称之为生命周期),用于捕获路由组件的激活状态。

6、路由的导航守卫 

---

1、安装路由，

vue 给我们提供了路由功能，该包需要单独安装。

npm install vue-router -S

 如果你的vue版本是2.0+ 那就要安装 vue-router@3 版本一下的，因为vue-router@4的版本只适合vue3，用在vue2.0+ 会报错。用在vue2.0+会报错

npm install vue-router@3 //指定下载3版本

如果安装错了使用一下命令删除

npm uninstall vue-router

2、 引入并配置路由

在src下创建一个 router.js文件，用来编写路由信息 。

import Vue from "vue";//引入vue
import VueRouter from "vue-router";//引入vue路由

import Home from "@/components/nav/Home.vue";//首页
import Search from "@/components/nav/Search.vue";//探索
Vue.use(VueRouter);//挂在路由插件
const routes = [//路由表示的是url和组件的一一对应的关系，使用path属性表示url路径，使用component属性表示组件
    
    {
        name:'Nhome',//Home
        path:'/home',
        component:Home,
    },
   
    {
        name:'Nsearch',//探索
        path:'/search',
        component:Search
    },
]
const router = new VueRouter({// 生成一个路由实例
    routes// 配置项-配置视图和路由之间的对应关系
});
//修改原型对联 的push 
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
//导航守卫
// router.beforeEach((to,from,next)=>{
//     console.log(to,from)
//     next();
// })

export default router // 导出路由实例

路由中的配置对象

1. name：给当前路由组件定义的名字。
2. path：跳转时的路径，比如：this.$router.push('/about');
3. component：引入外部资源 路径的名称。
4. childen：[] 路由嵌套 是个数组形式 当前路由组件下的 子路由，也可以多级嵌套。
5. meta：{} 路由元 可以设置一些自己的配置 平且可以在路由实例中拿到 meta对象，meta名字是固定的不能修改成其他的。

  {
        name:"给路由起的名字"，
        path:"/about"，//路径
        component:"About"，//引入的外部资源 比如import About from '@/index/index'
        childen:[            // 嵌套路由
            {
                name:"xxxx",
                path:"xxx",
                component:"xxx"
            }
        ]，
        meta:{},//路由元 自定义配置
    } 

并且在main.js 中引入 vue路由实例 

import Vue from 'vue'
import App from './App.vue'
import router from './router'//引入路由
import store from './store/store'//引入vuex
import i18n from './lang/index'
Vue.config.productionTip = false//关闭vue中的提示 true 是开启
Vue.use(ElementUI);//挂在ElementUI

new Vue({
  render: h => h(App),
  router,//路由
  store,// 在这里注入store实例后，所有的组件都可以通过 this.$store去访问store实例
  i18n
}).$mount('#app')

3、 路由的视图展示以及命名

<router-view>
    //路由组件 在这里面显示
</router-view>

视图的命名 我们都知道 路由组件会在 router-view 里面显示 但是如果有一个需求 需要同时显示A组件和b组件 当然router-view 也可以多写 想写几个写几个 但他们都会展示一样的内容。

但给视图起个名字 让他只显示B组件 只给B组件工作 其他组件他一概不显示。

给视图起一个名字 叫 liop 名字随便起的。

<router-view name="liop">
    //命名后的 路由组件 在这里面显示
</router-view>

 路由配置也需要做一些改动，需要把component 修改成 components 在后面加了一个 s 而且也变成了对象的形式，前面的名字是随便起的但是需要跟视图中的name 名字一样才行，后面的就是外部引入的名称。

{
        name:'Nshequ',//社区
        path:'/shequ',
        components:{
            liop:Shequ
        },
    },

这样一来<router-view name=“liop” ></router-view> 只会显示 B组件了 如果不给视图起名字，那他可以显示全部组件。

4、 路由跳转方式以及传递参数

第一种标签跳转 router-link 

to=" "：你要去哪里 直接写 路径地址 就是你配置在router.js 中的path的地址。

active-class=" "：被激活之后的样式 点击选中后会执行这里面的样式。

replace ：作用:控制路由跳转时操作浏览器历史记录模式

        浏览器的历史记录有两种写入方式：分别时push和replace, 
                            push是追加历史记录,     
                            replace是替换当前记录(注意:是替换当前的), 路由跳转时候默认为push, 
                            如何开启在 <router-link replace> </router-link>

<router-link replace to="/home/?id=1&tilet='哈哈'" active-class="active"></router-link>

第二种编程式跳转以及携带参数

不携带参数的写法

this.$router.push("/home");

携带参数的写法

pushShow(m){
    this.$router.push({
		name:'nihao',
		query:{
		    id:m.id,
		    title:m.title
	    }    
    })
}

 还有就是上面所说的 replace 浏览器的历史记录，分别时push和replace, 以上两种都是push 追加历史记录,

下面这个是replace 替换历史记录，路由默认的是push追加。

replace的编程式路由导航
		pushShow(m){//m 传递的参数
			this.$router.replace({
				name:'nihao',
				query:{
					id:m.id,
					title:m.title
				}
			})
		}

5、路由组件独有的两个钩子函数(也称之为生命周期),用于捕获路由组件的激活状态。

1、跟组件中使用跟生命周期一样，只不过是用来捕获 路由组件的激活状态。

人话：就是被点击后展示当前组件时激活。

activated(){
    console.log('被激活了')
}

2、路由组件失活时触发 。

人话：就是不展示当前组件的时候就会触发

deactivated(){
    console.log('被失活了')
}

6、路由的导航守卫 

路由守卫的 to去哪里，from从哪来，next可以去。

1、全局前置守卫！--初始化的时候就被调用、每次路由切换前被调用

router.beforeEach((to, from, next)=>{
		//...
});

 2、全局后置守卫！--初始化的时候就被调用、每次路由切换前被调用，后置就没有next。

router.afterEach((to, from)=>{
		//...
});

3、独享路由守卫 只有前置没有后置 

{
		name:"xxx",
		path:"xxx",
		component:"xxx",
		//独享前置守卫
		beforeEnter:(to,from,next)=>{
			//...
		},
	}

 4、组件路由后卫

通过路由规则，进入该组件时被调用。

路由规则： 就是点击 router-link 或者this.$router.push()。

beforeRouteEnter(to,from,next){
    //通过路由规则，进入该组件时被调用路由规则 就是点击 router-link 或者this.$router.push()
},

通过路由规则，离开该组件时被调用。

路由规则： 就是点击 router-link 或者this.$router.push()。

beforeRouteLeave(to,from,next){
    //通过路由规则，离开该组件时被调用路由规则 就是点击 router-link 或者this.$router.push()
}