【Vue重要知识点】Vue-router的安装,使用及vue-router实例方法[每一个人的背后都有一个默默付出的人！！！]

每一个人的背后都有一个默默付出的人！！！

 

1.首先看一下vue中路由怎么安装

npm install vue-router@3.1.x //这里可以选择你需要什么版本 这里默认使用3.1.x版本 如果要最新版本直接输入npm install vue-router

2.安装完成后,在vue里路由组件中使用路由

例:使用简单的路由

import Vue from 'vue'             //创建一个index.js文件导入vue
import Router from 'vue-router'   //导入vue-router路由

Vue.use(Router)                   //这里导入的Vue和Router变量名 注意大小写 也可以小写 这里因人而异

/*在编写路由入口后就可以创建路由对象了 帅哥美女请看下面操作*/

3.在编写路由入口后就可以创建路由对象了

//这里进行创建路由对象操作 下面两种方法结果相同 就是编写习惯和方式不同
方法1：
(1).先创建一个路由对象
const router=new Router({
    routes:[{               //routes里面是来写配置路由规则
    path:'/',
    component:Header;
}]
})
(2).然后再默认向外导出对象
export default router

方法2： 直接new一个对象 向外直接导出
export default new Router({
  routes: [{
    path:'/',
    component:Header;
}]

4.编写路由规则

//这里就采取方法2的创建路由方式

*//导入vue组件名有两种方法*      //这里推荐第二种方法
*1.传统写法,加载速度慢：import Login from './components/Login'
*2.路由懒加载的方法： const Login=()=>import('../components/Login') 

export default new Router({
  routes: [{
    path:'/login',             //path是写路由路径
    component: Login ;      //component是编写组件名 上面创建加载路由后直接写进
},
 {
    
    path: '',                //一般设置路由重定向组件 path可为:'' 或 '/'
    redirect:'/login'        //默认重定向路径为/login
},
//这里演示一下子组件 children的用法 路由嵌套 子路由里的路径前不用加/
 {
      path:'/register',
      component: ()=>import('../components/register') ,  //这里可以直接写入
   
      children:[
        {
          path:'usermessage',               ***//注意子路由前不需要加/
          component:()=>import('../components/usermessage')
        }
]}
]

//下期讲解在vue组件如何在Vue组件中使用