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

时间：2020-05-05 22:57:59 阅读：79 评论：0 收藏：0 [点我收藏+]

vue-router前端路由

路由的基本概念

本质

路由本质是对应关系

路由分类

后端路由

概念：根据用户的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‘)
        }
    }
}

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‘ } })

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

原文：https://www.cnblogs.com/erkye/p/12833068.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)