Vue再学习5_路由router的使用

Vue再学习5_路由router的使用

router的引入

1: 下载 npm i vue-router -S

2: 在main.js中引入 import VueRouter from 'vue-router';

3: 安装插件 Vue.use(VueRouter);

设置router

// 1、添加home.vue




// 2、在main.js中设置
let router1 = new VueRouter({
  routes:[
    {
      path:'/home',
      component:Home
    }
  ]
});
// 注意在vue项目中的index.js就是router
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 页面引入
import Home from '../components/Home.vue'
import Movie from '../components/Movie.vue'
import Music from '../components/Music.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/home',
      component:Home
    },
    {
      path:'/music',
      component:Music
    },
    {
      path:'/movie',
      component:Movie
    }
  ]
})


// 3、main.js的Vue中设置路由
new Vue({
  el: '#app',
  router:router1,
  components: { App },
  template: ''
})

// 4、在app.vue中添加路由基布局位置
 

注意：

在我们的window中添加了对应的监听：window.addEventListener('hashchange',fn);

根据你放

作为一个DOM上的标识

最终当锚点值改变触发hashchange的回调函数，我们将指定的模板数据插入到DOM标识上

设置点击链接

// 1、通过a标签设置连接
home页
进入电影
进行音乐

// 2、通过name设置连接
进入home
进行音乐
进入电影

// 注意，这里的routes需要设置对应的name
{
  name:'home',
  path:'/home',
  component:Home
},
{
   name:'music',
   path:'/music',
   component:Music
},
{
   name:'movie',
   path:'/movie',
    component:Movie
}

route传参

query传参

 // 1、设置对应的query
 进入home

// 2、获取参数，在created生命周期通过this.$route.query获取
 created() {
   console.log(this.$route.query)
 }

注意：这里query中的参数最终是将参数凭借到url中传递的

params传参

  // 1、设置对应的params
 进行音乐

// 2、获取参数，在created生命周期通过this.$route.query获取
 created() {
   console.log(this.$route.params.data);
 }

区别

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示。

注意：

query刷新不会丢失query里面的数据 params刷新 会会 丢失 params里面的数据

router栈管理

route入栈

// 1、设置跳转方法，通过push进行入栈

   点击跳转音乐


methods:{
  goMusic(){
  	this.$router.push('music')
  }
},

route返回与下一页

// 2、跳转至上一页和下一页
this.$router.go(-1); // 跳转上一页
this.$router.go(1);  // 跳转下一页

一个页面多route的配置

// 在app.vue中配置对个 

  
  
  

对于没有名字的view，名字默认为default。

// 在router中为对应的进行设置conponent
{
  name:'home',
  path:'/home',
  components:{
    header:Music,
    default:Home,
    footer:Movie,
  }
},
{
  name:'music',
  path:'/music',
  component:Music
},

注意：在中，没有名字则为default。

优点： 对于局部布局经常变化的界面，采用多路由结构比较节约资源，因为很大一部分界面不需要重新渲染。

嵌套路由配置

// 1、在route中配置内部跳转
{
  name:'music',
  path:'/music',
  component:Music,
  children:[
  {
      name:'oumei',
      path:'/oumei',
      component:Oumei
    },
    {
      name:'guochan',
      path:'/guochan',
      component:Guochan
    }
  ],
}

// 2、在对应的组件中加入和路由跳转

  我是music
  欧国产音乐
  欧美音乐
  

注意：这里的路径path是相对于父路径的相对路径