【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组件中使用 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值