zoukankan html css js c++ java

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

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

查看全文

相关阅读:
H3C Comware V5、V7平台交换机分类
 如何从症状上区别风寒感冒与过敏性鼻炎
 rdp3389mstsc使用剪贴板重定向通过远程桌面服务或终端服务会话复制大于 2 GB 的文件 (复制) 会以静默方式失败
 小区光纤PON接入组网方式与案例
 Esxi6.7网络trunk端口设置和vlan端口设置访问
 安装VCenter 6.7的系统要求
 win10自定义时间服务器
 fabric基础设施管理-（四）多机-动态新增组织节点
 fabric基础设施管理-（三）单机-动态新增组织节点
 fabric基础设施管理-（二）基础网络搭建

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