VueRouter

Vue-router 实现页面导航

页面导航

• 添加新的页面组件
• 配置路由，为新页面添加新的路由
• App.vue中添加router-link标签，相当于a标签，链接到路由分配的组件页面

// test1.vue
<template>
  <div>
    <h3>新的路由页面</h3>
  </div>
</template>

<script>
export default {
  name:'test1',
}
</script>

<style scoped>
</style>

// App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to='/'>主页</router-link>
      <router-link to='/test'>测试</router-link>
    </div>
    <router-view/>
  </div>
</template>

// index.js
import test1 from '../components/test1'
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/test',
      name:'test1',
      component:test1
    }
  ]
})

添加子路由

• 添加子路由页面的组件
• 配置路由，添加子路由配置
• 在App.vue中，添加router-link标签引入子路由页面

//testFir.vue
<template>
  <div>
    <h3>子路由1</h3>
    <div>增加一个新的组件，通过路由router分配，形成一个新的分页面</div>
  </div>
</template>
<script>
export default {
  name:'testFir',
}
</script>
<style scoped>

</style>

//testSce.vue
<template>
  <div>
    <h3>子路由2</h3>
    <div>增加一个新的组件，通过路由router分配，形成一个新的分页面</div>
  </div>
</template>
<script>
export default {
  name:'testSec',
}
</script>
<style scoped>

</style>

// index.js
{
    path:'/test',
    name:'test1',
    component:test1,
    children:[
    {path:'/', component:test1 },
    {path:'testFir',component:testFir},
    {path:'testSec',component:testSec}
    ]
}

// App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to='/'>主页</router-link>
      <router-link to='/test'>测试</router-link>
      <router-link to='/test/testFir'>测试1子路由1</router-link>
      <router-link to='/test/testSec'>测试2子路由2</router-link>
    </div>
    <router-view/>
  </div>
</template>

Vue-router 单页面多路由区域操作

核心：将多个路由页面添加到主页面的不同区域

• App.vue添加router-view标签，注意该标签是一个自结束标签
• 添加多个路由文件
• 配置路由，增添router-view的name属性，通过name属性将router-view与路由页面对应起来，实现单页面多个区域的分配

//App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <router-view name='left' />
    <router-view name='right'/>
  </div>
</template>

//sectwo.vue
<template>
  <div id='right'>
    <h3>主页面右边区域的内容</h3>
    <p>所有的一切都是在右边的，世界都是围绕着右边才能进行运转的</p>
    <p>整个世界都在靠右移动，右边的比重整个都在加重</p>
    <router-view/>
  </div>
 
</template>
<script>
export default {
  name:'sectwo',
}
</script>

<style scoped>
  #right {
    width:50%;
    height:200px;
    float:left;
    background-color:rgb(183, 231, 240);
  }
</style>

//secone.vue
<template>
  <div id='left'>
    <h3>主页面左边区域的内容</h3>
    <p>所有的一切都是在左边的，世界都是围绕着左边才能进行运转的</p>
    <p>整个世界都在靠左移动，左边的比重整个都在加重</p>
  </div>
</template>
<script>
export default {
  name:'secone',
}
</script>

<style scoped>
  #left {
    width:50%;
    height:200px;
    float:left;
    background-color:wheat;
  }
</style>

//index.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      components: {
        default:Hello,
        left:secone,
        right:sectwo
      }
    },
  ]
})

Vue-router 利用url传参数

//index.js
import talk from '../components/talk'
{
    path:'/ta/:theme/mains',
    component:talk
}

//App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to='/'>main page</router-link>
      <router-link to='/ta/122/oneday'>talk page</router-link>
    </div>
    <router-view/>
  </div>
</template>

Vue-router 重定向

重定向即是不指向原有的链接而是指向重新指定的链接地址

//index.js
{
    path:'/ret',
    redirect:'/'
}

// App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to='/'>main page</router-link>
      <router-link to='/ret'>return mains</router-link>
    </div>
    <router-view/>
  </div>
</template>

Vue-router alias别名的使用

alias即是通过alias给当前的路由页面设置一个别名，可以用来访问当前页面的内容

//index.js
{
    path:'/ta',
    component:talk,
    alias:'/mu'
}

//App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to='/ta'>talk page</router-link>
      <router-link to='/mu'>moofeng</router-link>
    </div>
    <router-view/>
  </div>
</template>

Vue-router 设置路由mode和添加404页面

设置路由mode模式，去除页面地址的#号

• mode:history 去除#号
• mode:hash 带有#号

//index.js
export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

添加404页面

• 添加404页面
• 配置路由

//error.vue
<template>
  <div>
    <p>Your request is error,please make sure your request!</p>
  </div>
</template>

//index.js
export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },{
      path:'/ta',
      component:talk,
      alias:'/mu'
    },{
      path:'*',
      component:error
    }
  ]
})

编程式导航

在程序中书写导航，譬如前进、后退、跳转

//App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <button @click='after'>返回</button>
      <button @click='before'>往前</button>
      <button @click='back'>回首页</button>
    </div>
    <div>
      <router-link to='/'>main page</router-link>
      <router-link to='/ta'>talk page</router-link>
      <router-link to='/mu'>moofeng</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    after(){
      this.$router.go(-1)
    },
    before(){
      this.$router.go(1)
    },
    back(){
      this.$router.push('/')
    }
  }
}
</script>