[JavaScript知识库]Vue-router笔记

前端的核心是监听hash地址的变化使用 window.onhashchange() location.hash

  created(){
    window.onhashchange = ()=> {
      console.log("监听到了hash地址",location.hash);
      switch(location.hash){
        case '#/home':
          this.comName='Home'
          break
        case '#/movie':
          this.comName='Movie'
          break
         case '#/about':
          this.comName='About'
          break          
      }
    }
  }

当元素创建了,就监听hash值的变化,然后进行判断并赋值,最后渲染元素

在src创建一个router/index.js文件,`import Vue from ‘vue’
import App from ‘./App.vue’

// 拿到实例对象
import router from ‘./router/index’

// 导入 bootstrap 样式
import ‘bootstrap/dist/css/bootstrap.min.css’
// 全局样式
import ‘@/assets/global.css’

Vue.config.productionTip = false

new Vue({
render: h => h(App),
router:router
}).$mount(’#app’)
然后就把模块引入main.js(引入实例对象)

new Vue({
render: h => h(App),
router:router
}).$mount(’#app’)
把Vuerouter实例对象放入vue实例之中之中

总结:在创建vue-cli的时候,勾选router的时候,会帮我们创建一个router/index.js文件及其相关代码

--------------------分隔线-------------------------------
在APP2.vue中提供

const router = new VueRouter({
// 数组,作用:定义hash地址与组件的对应关系
routes: [
//路由规则
{path:’/’,redirect:’/home’},//路由重定向,在进来的时候进入指定的路由规则,不会空空的
{ path: ‘/home’, component: Home },
{ path: ‘/home’, component: Home },
{ path: ‘/movie’, component: Movie },
{ path: ‘/about’, component: About }
]
})
-----------------分隔线--------------------
vue-router不仅提供了router-view,还提供了router-link,这是在编码的时候一个替代a链接的东西,但是在检查的时候还是a链接,to是一个href vue首页 首页

子路由的定义
在子路由

{
path: ‘/about’,
component: About,
children: [
{ path: ‘tab1’, component: Tab1 },
{ path: ‘tab2’, component: Tab2 },
// 默认子路由
],redirect: ‘/about/tab1’//默认子路由
}
用于获取网址的参数用

console.log(this.$route.params.id);//id是参数
$route.params.path
$route.params.fullPath
$route.params.matched 获取路由当前和子路由

routes: [

{ path: ‘/movie/:id’, component: Movie, props: true }
] 开启props传值可以传送到组件之中,在组件进行接收props进行使用
http://localhost:8080/#/movie/1?naem=zs&age=21
/movie/1在hash地址中是路径参数,
?naem=zs&age=21在hash地址中是查询参数

this.$route.fullpath是hash地址带参数的,path是hash地址不带查询参数的

hash地址中/后面的是路径参数,this.KaTeX parse error: Expected 'EOF', got '&' at position 50: …取路径参数的 ?name=zs&?age=21后面的是查询参数,…route.query是查询参数
在路径之中,fullpath是hash地址带参数的,path是hash地址不带参数(部分路径)的

声明式与编程式导航

a,vue-router是声明式导航

this.$route是"参数式编程",是url上的url的参数,this.$router是"导航式编程",因为里面有很多导航式api
编程式导航,是放在methods里面的是一个方法,也可以这样子
<button @click="$router.back()">后退

this.$router.push("")里面是放hash地址,会修改本页的hash地址进行跳转,并增加一条记录

this.$router.replace("")里面是放hash地址,会修改本页的hash地址进行跳转,会覆盖记录1.在路由获取参数,之后进行传递到组件之中2.this.$route.params.参数

{ path: ‘/movie/:id?’, component: Movie, props: true },

{{id}}

前端守卫

router.beforeEach((to, from, next) => {
next()// 可以通过
console.log(to) // 到达的组件
console.log(from) //之前的组件
})
11-27
从一个页面到另一个页面是通过url传输的
第一种是 this.$router.push()
第二种是 传值

把:id传到组件之中的,在组件里面用props:[‘id’]接收

:id 是在index.js才可以使用的,路由规则

是阻止a链接的作用的prevent 详情

pathArr.js

export default [’/home’, ‘/home/users’, ‘/home/goods’, ‘/home/goods/’, ‘/home/orders’, ‘/home/setting’, ‘/home/info/’]

 <Swiper :items="imgList"></Swiper>
data () {
    return {
      imgList: [{ id: 1, src: 'https://img2.baidu.com/it/u=1308964894,427693321&fm=26&fmt=auto' },
        { id: 2, src: 'https://img1.baidu.com/it/u=3325673457,2271295441&fm=26&fmt=auto' }]
    }
  },

index.js
router.beforeEach(function(to, from, next) {
  if (pathArr.indexOf(to.path) !== -1) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

• main.js是处理vue组件与html页面的文件,可以用来注册Vue原型对象
• 在模块化中,给定的文件夹下面不给具体文件,那么就是index.js
  import router from ‘./router’
  import router from ‘./router/index.js’