Vue学习笔记4--vue-router路由

vue-router前端路由

完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ

路由的基本概念

本质

路由本质是对应关系

路由分类

  • 后端路由

    概念：根据用户的URL请求返回不同内容
本质：URL请求地址与服务器资源之间的对应关系

  • 前端路由

    概念：根据不用的用户事件，显示不用的页面内容
本质：用户事件和事件处理函数之间的对应关系

实现简单的前端路由

  • 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
window.onhashchange = function(){
    console.log(location.hash);
}

Demo

<body>
    <div id="app">
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>
        
        <!-- 组件占位符 -->
        <component :is="comName"></component>
    </div>
    <script>
        const zhuye = {
            template: '<h1>主页信息</h1>'
        }
        const keji = {
            template: '<h1>科技信息</h1>'
        }
        const caijing = {
            template: '<h1>财经信息</h1>'
        }
        const yule = {
            template: '<h1>娱乐信息</h1>'
        } 
        const vm = new Vue({
            el: '#app',
            data: {
                comName: 'zhuye'
            },
            components: {
                zhuye,
                keji,
                caijing,
                yule
            }

        });
		
        //监听页面hash值的变化
        window.onhashchange = function(){
            vm.comName = location.hash.slice(2);
        }
         
    </script>
</body>

vue-router的基本使用

Vue.js官方的路由器，和Vue.js核心深度集成

功能

  • 支持H5的历史模式和hash模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由

使用步骤

  • 引入相关库文件

    <!-- 引入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入vue-router.js -->
<script src="js/vue-router.js"></script>

  • 添加路由链接

    <!-- router-link 默认渲染为a标签 -->
<!-- to 属性渲染为href -->
<!-- to 属性的值渲染为#开头的hash地址 -->
<router-link to="/user">User</router-link>

  • 添加路由填充位

    <!-- 路由填充位也称为路由占位符 -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在位置-->
<router-view></router-view>

  • 定义路由组件

    var User = {
    template: '<h1>User</h1>'
}
var Register = {
    template: '<h1>Register</h1>'
}

  • 配置路由规则并创建路由实例

    const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        {path:'/user',component: User},
        {path: '/register',component: Register}
    ]
})

  • 把路由挂载到Vue实例中

    const vm = new Vue({
    el: '#app',
    data: {
        comName: 'zhuye'
    },
    //配置
    //router: router 对应一致时可以简写
    router

});

路由重定向

用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定页面

默认进入页面地址为：http://127.0.0.1:5500/index.html#/

希望进入: http://127.0.0.1:5500/index.html#/user

使用redirect属性配置

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        {path: '/', redirect: '/user'},
        {path:'/user',component: User},
        {path: '/register',component: Register}
    ]
})

vue-router嵌套路由

分析

  • 点击父级路由链接显示模板内容
  • 模板内容内容中又有自己路由链接
  • 点击子级路由链接显示子级模板内容

步骤

  • 创建父级路由链接和父级路由填充位
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

<!-- 路由填充位也称为路由占位符 -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在位置-->
<router-view></router-view>
  • 定义路由组件
var User = {
    template: '<h1>User 组件</h1>'
}
var Register = {
    template:  `
            <div>
            	<h1>Register 组件</h1>
            	<hr/>
            	<router-link to="/register/tab1">Tab1</router-link>
            	<router-link to="/register/tab2">Tab2</router-link>

            	<!-- 子路由填充位 -->
            	<router-view></router-view>
            </div>`
}
var Tab1 = {
    template: '<h2>Tab1</h2>'
}
var Tab2 = {
    template: '<h2>Tab1</h2>'
}
  • 嵌套路由配置
const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        {path: '/', redirect: '/user'},
        {path:'/user',component: User},
        {
            path: '/register',
         	component: Register,
         	//嵌套子路由
         	children: [
                 {path: '/register/tab1',component: Tab1},
                 {path: '/register/tab2',component: Tab2}
         	]
        }
    ]
})
  • Vue实例中挂载router
const vm = new Vue({
    el: '#app',
    data: {
        comName: 'zhuye'
    },
    //配置
    //router: router 对应一致时可以简写
    router

});

vue-router动态匹配路由

基本用法

 const router1 = new VueRouter({
     routers: [
         //动态路由路径参数 冒号开头
         {path: '/user/:id',component: User}
     ]
 })

组件中获取id值

const User = {
    //通过 $route.params 获取参数
    template: '<div>User {{ $route.params.id }}</div>'
}

Demo

  • 路由链接和路由填充位
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>

<!-- 路由填充位也称为路由占位符 -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在位置-->
<router-view></router-view>
  • 组件
const User = {
    //通过 $route.params 获取参数
    template: '<div>User {{$route.params.id}} 组件</div>'
}
  • 定义路由实例
const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {path:'/user/:id',component: User},
    ]
})
  • Vue实例中挂载router
const vm = new Vue({
    el: '#app',
    data: {

    },
    //配置
    //router: router 对应一致时可以简写
    router

});

传参方式

  • $route.params : 与对应路由高度耦合，不灵活
  • props：组件和路由解耦
props 使用
  • 定义props的值为布尔类型
const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        //props 值设置为true route.params 将会被设置为组件属性
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {path:'/user/:id',component: User, props: true},
    ]
})
  • 组件获取使用props获取属性
 const User = {
     //使用props获取路由参数
     props: ['id'],
     //通过 $route.params 获取参数
     template: '<div>User {{ id }} 组件</div>'
 }

props还可以是一个对象

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        //props 值设置为true route.params 将会被设置为组件属性
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {path:'/user/:id',component: User, props: {uname: 'test', age: 11 }},
    ]
})

注：此时id值无法访问

使用id的值方式如下：

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        //每个路由规则是一个配置对象，至少包含path和component两个属性
        //path: 当前路由规则匹配的hash地址
        //component： 便是当前路由规则对应的组件
        //props 值设置为true route.params 将会被设置为组件属性
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {
            path:'/user/:id',
            component: User, 
            //此时id的值和usname的值等都可使用
            props: route => ({uname: 'lisi' , age: 20, id: route.params.id })
        },
    ]
})

vue-router命名路由

概念

为了更加方便的表示路由的路径，给路由规则起一个别名，即为：命名路由

const router = new VueRouter({
    //存放路由规则的数组
    routes: [
        
        {path: '/', redirect: '/user'},
        //动态路由路径参数 冒号开头
        {
            name: 'user',
            path:'/user/:id',
            component: User, 
            props: true
        }
    ]
})

页面跳转使用命名路由(to属性要添加 ：)

<router-link :to="{ name: 'user', params: {id: 123} }">User1</router-link

vue-router编程式导航

常见页面导航方式

  • 声明式导航
<a></a>
<router-link></router-link>
  • 编程式导航：通过调用JavaScript的API实现导航方式
location.href=

Vue中的编程式导航

this.$router.push('hash地址')
//n是历史记录 1：表示历史记录中前进1位 -1：表示历史记录中后退1位
this.$router.go(n)

Demo

push

const User = {
    //使用props获取路由参数
    props: ['id'],
    //通过 $route.params 获取参数
    template: `
    <div>
        <div>User {{id}} 组件</div>
        <button @click='goRegister'>跳转到注册界面</button>
    </div>`,
    methods: {
        goRegister(){
            //跳转指定页面
            this.$router.push('/register')
        }
    }
}

go

var Register = {
    template:  `
    <div>
    	<h1>Register 组件</h1>
    	<hr/>
    	<button @click='goBack'>回退一步</button>
    	<router-link to="/register/tab1">Tab1</router-link>
    	<router-link to="/register/tab2">Tab2</router-link>

        <!-- 子路由填充位 -->
        <router-view></router-view>
    </div>`,
    methods:{
        goBack(){
            //回退一步
            this.$router.go(-1);
        }
    }
}

push方法参数

//字符串
router.push('/home')
//对象
router.push({ path: '/home' })
//命名路由 携带参数
router.push({name: 'user', params: { user: 'test'} })
//查询参数 /register?name=test
router.push({ path: '/register', query: { name: 'test' } })
posted @ 2020-05-05 21:48  UtilMan  阅读(177)  评论(0)  编辑  收藏  举报