Vue Router之路由基础

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

一、引入Vue Router

首先确保你的工程文件有vue router。

如果没有的话，在项目文件夹打开命令行工具，输入：

npm install vue-router --save

进行安装。

接下来再 main.js中引入。

import VueRouter from 'vue-router'
Vue.use(VueRouter);

二、配置vue router

// 配置路由
const router = new VueRouter({
  routes:[
    {path:'/',component:Home},
    {path:'/works',component:Works},
    {path:'/about',component:About},
  ]
})

path 为路由地址；component 为需要前往的组件

所以在这之前我们需要引入组件：

import Home from './Pages/Home/Home'
import Works from './Pages/Works/Works'
import About from './Pages/About/About'

根据自己的文件夹目录进行引入。

然后，把router再在ue中实例化：

new Vue({
  el: '#app',
  router,//这里
  components: { App },
  template: '<App/>'
})

三、使用

普通跳转：

<a href="#">跳转</a>

使用vue router：

<router-link to="/">主页</router-link>

to里面的地址和path相同。

------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------- vue router 进阶 ----------------------------------------------

一、使用名字代替path地址：

在配置路由时添加 name 属性。

const router = new VueRouter({
  routes:[
    {path:'/',component:Home},
    {path:'/works',component:Works,name:'WorksLink'},//添加name
    {path:'/about',component:About},
  ]
})

跳转改写为：

<router-link :to="{name:'WorksLink'}">作品</router-link>

二、可以通过:to="数据名" 进行动态绑定

三、编程式导航

推荐用push 少用 replace

<template>
    <div>
        <h1>Works</h1>
        <button @click="goToPrev">前一页</button>
        <button @click="goToSpec">特定页</button>
        <button @click="goToByName">特定页(通过名字跳转)</button>
    </div>
</template>

<script>
export default {
    name: 'Header',
    methods:{
        goToPrev(){
            this.$router.go(-1) //前一页
        },
        goToSpec(){
            //this.$router.replace('/')
            this.$router.push('/');//指定页
        },
        goToByName(){
            this.$router.push({name:'WorksLink'}) //通过名字指定
        }
    }
}
</script>

四、通配符跳转

如果你尝试访问一个不存在的路径时，我们可以设置，不存在路径的路由

// 配置路由
const router = new VueRouter({
  routes:[
    {path:'/',component:Home},
    {path:'/works',component:Works,name:'WorksLink'},
    {path:'/about',component:About},
    {path:"*",redirect:'/'} //默认跳转
  ]
})

在最后添加path: '*' ，当访问不存在的路径时，会跳转到redirect指定的路径，这里我们设置的是首页。

五、History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

此时地址如图：

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

改写路由配置：

// 配置路由
const router = new VueRouter({
  routes:[
    {path:'/',component:Home},
    {path:'/works',component:Works,name:'WorksLink'},
    {path:'/about',component:About},
    {path:"*",redirect:'/'} //默认跳转
  ],
  mode: 'history' //history模式
})

此时地址如图：

Vue的中文文档非常好，所以还是推荐看官方文档。

Vue Router之路由基础

猜你喜欢