vue-router学习

用vue-cli3创建vue项目，可以在创建时让脚手架安装好vue-router，但这里我不这么做，本着学习router的目的，后面一步步手动创建

起步

vue create vue-router-project

1）在components目录下删除掉Holloworld.vue组件及相关代码，新建Home.vue和About.vue组件

Home.vue

About.vue

2）在终端用命令安装router

cnpm i vue-router -s

3）在src目录下新建router目录，router目录下再创建index.js,index.js代码的配置分5步

3.1)引入vue和vue-router并把vue-router装配到vue上

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

3.2)引入Home和About组件

import Home from '../components/Home.vue'
import About from '../components/About.vue'

3.3)创建VueRouter实例

const router = new VueRouter({

})

3.4)配置路由规则，这里我们将路由规则提取到路由实例外

const  routes = [
    {
        path:'/home',
        component:Home
    },
    {
        path:'/about',
        component:About
    }
]

const router = new VueRouter({
    // 配置路由和组件间的对应关系
    routes
})

3.5)导出路由

export default

4)main.js的配置
导入路由并挂载到vue实例

image

5)在终端运行项目

npm run serve

运行结果

image

6)当我们希望首页一开始就是展开着的时， 我们可以在路由配置规则中配置redirect(重定向)

{
        path:'',
        redirect:'/home'
    }

image

可以看出我们的访问路径中含有#这个字符，这是hash模式

hash模式下的访问路径

我现在改成history模式，可以在路由实例中配置

image

这时候访问路径就变成了这样，是不是更简洁美观了

history模式

7)标签默认是渲染成标签的，我们可以让它渲染成其它标签，中的tag属性可能实现，这里我指定它渲染成button

image

8)标签中还有一个replace属性，加上它可以实现路径不能返回

 首页
 关于

image

9)当按钮被点击时，让它处于一个激活状态

9.1)标签用来设置激活状态的默认class是.router-link-active，我们可以直接在

这里另一个重要的vue-router属性是$route,，我们可以用$route.params. ** 取出传递过来的参数
2)在index.js中引入user组件

import User from '../components/User.vue'

路由配置规则中配置如下动态路由

{
    path:'/user/:userId',
    component:User
}

image

在App.vue组件中的

HomeNews.vue

2)打开index.js

2.1)导入子组件

const News= ()=>import('../components/children/HomeNews.vue')
const Message= ()=>import('../components/children/HomeMessage.vue')

2.2)在路由配置规则里给home路由配置子路由规则

children:[
   {path:'',redirect:'news'},
   {path:'news',component:News},
   {path:'message',component:Message}
]

image

3）在Home.vue组件中添加展现路由的视图

新闻
消息

image

运行结果

image

传递参数

路由传递参数的方式有两种，一种是上面说过的动态路由，现在来学习第二种方式
1）在components目录中新建Profile.vue组件

2）在index.js中导入组件并配置路由规则

const Profile = ()=>import('../components/Profile.vue')

{
path:'/profile',
component:Profile
}

3）在App.vue中添加代码

档案

4）再回到Profile.vue中添加接收路由传递过来的数据的代码

{{$route.query.name}}
{{$route.query.age}}

运行结果

image

导航守卫

我们现在用全局前置守卫来切换网页的title

image

在路由配置规则中给各个路由添加meta属性

meta:{
title:'首页'
}

image

然后使用 router.beforeEach 注册一个全局前置守卫

router.beforeEach((to,from,next) => {
    document.title = to.matched[0].meta.title
    next()
})

运行结果

image

修改配置

修改cli3创建的项目的配置有两种方式

1）在node_modules目录的如下目录中直接修改

image

image

2）在项目的根目录下创建一个名为vue.config.js的文件，这里进行简单的配置

module.exports = {
    devServer:{
        // 运行时自动打开浏览器
        open:true
    }
}

至此，本学习项目的最终目录结构如下

image

Vue Router官网

个人网站：www.panbingwen.cn