vue学习——路由vueRoute

1 路由

路由就是对应关系，hash地址与组件之间的对应关系

1.1. 前端路由

前端路由的工作方式：

简单实现前端路由：

1.2 vue-router

安装和配置vue-router:

npm i vue-router@3.5.2 -S

创建目录和文件并初始化如下代码：

//1.导入Vue和VueRouter包
import Vue from "vue";
import VueRouter from "vue-router";
//调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)
//创建路由实例对象
const router = new VueRouter()
//向外共享路由实例对象
export default router

导入并挂载路由模块：

在main.js中添加代码

import Vue from 'vue'
import App from './App.vue'

// 导入 bootstrap 样式
import 'bootstrap/dist/css/bootstrap.min.css'
// 全局样式
import '@/assets/global.css'
//导入路由
import router from '@/router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //挂载路由
  router
}).$mount('#app')

声明路由连接和占位符：

//1.导入Vue和VueRouter包
import Vue from "vue";
import VueRouter from "vue-router";
import Home from '@/components/Home.vue'
import Moive from '@/components/Movie.vue'
import About from '@/components/About.vue'

//调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)
//创建路由实例对象
const router = new VueRouter({
    //定义路由与组件的对应关系
    //路由规则
    routes:[
        //路由重定向  
        {path:'/',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/movie',component:Moive},
        {path:'/about',component:About}
    ]
})
//向外共享路由实例对象
export default router

嵌套路由：使用children节点

const router = new VueRouter({
    //定义路由与组件的对应关系
    //路由规则
    routes:[
        //路由重定向  
        {path:'/',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/movie',component:Moive},
        {path:'/about',
         component:About,
         //子路由规则
         children:[
              //默认子路由，path为空就行
              {path:'',component:Tab1},
              {path:'tab1',component:Tab1},
              {path:'tab2',component:Tab2}
          ]
        }
    ]
})

动态路由：

把hash地址中可变的部分定义为参数项，使用:来定义路由的参数项

this.$route是路由的参数对象

this.$router是路由的导航对象

基本使用：

app2.vue:

首页
夏洛特烦恼
怦然心动
哈利波特
关于

Moive.vue:

router/index.js:

{path:'/movie/:id',
  component:Moive,
},

常用方式：为路由开启props传参

router/index.js:

{path:'/movie/:id',
  component:Moive,
    //开启传参
    props:true
},

Moive.vue:

1.3 拓展query和fullPath

在hash地址中**/**后面的参数项，叫做路径参数

在路由参数对象中，需要使用this.$route.params来访问路径参数

在hash地址中**?**后面的参数项，叫查询参数

在路由参数对象中，需要使用this.$route.query来访问查询参数

在this.$route中，path只是路径部分，fullPath是完成的地址

例如：/moive/2?name=prxd是fullPath

​ /movie/2是path

怦然心动

Movie 组件----{{id}}---{{this.$route.query.name}}

1.4 导航 1.4.1 声明式导航&编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航 比如：

在浏览器中，调用API方法实现导航的方式，叫做编程式导航 比如location.href

vue-router中的编程式导航的API：

Home.vue:

$router.go简化用法：

1.4.2 导航守卫

导航守卫可以控制路由访问权限

全局前置守卫：

每次发生路由 的导航跳转时，就会触发全局前置守卫。

在router/index.js中的const router = new VueRouter({…})后面添加一下代码：

//声明全局前置导航守卫
router.beforeEach((to,from,next) =>{
     //to 要访问的路由,from 是要离开的路由,next()是一个函数，表示放行，允许跳转
     next()
})

编写以下代码：

router.beforeEach((to,from,next) =>{
     //to 要访问的路由,from 是要离开的路由,next()是一个函数，表示放行，允许跳转
     //1.要拿到用户想要访问的hash地址
     //2.要判断地址 是否等于/main 是需要证明登陆后才访问，不是直接放行
     //3.如果访问的地址是/main,则需读取localStorage中的token值
     //4.如果有token 则放行，没有则强制跳转到/login
     if(to.path === '/main'){
        const token = localStorage.getItem('token')
        if(token){
            next()
        }else{
            next('/login')
        }
     }else{
        next()
     }    
})