Vue路由的创建和使用方法
程序员文章站
2022-03-11 16:09:13
Vue路由的创建一 vue路由创建指令npm i vue-router # 安装路由插件二、vue路由标签router-link : 是用来生成a标签的组件,做页面跳转router-view : 是用来展示路由对应的内容的组件,所有的路由地址访问时对应的内容都在组件范围内显示三,使用,两种写入方式(当你用指令创建之后)import Vue from 'vue'import VueRouter from 'vue-router'import Home from './pages/Ho...
Vue路由的创建
一 vue路由创建指令
npm i vue-router # 安装路由插件
二、vue路由标签
- router-link : 是用来生成a标签的组件,做页面跳转
- router-view : 是用来展示路由对应的内容的组件,所有的路由地址访问时对应的内容都在组件范围内显示
三,使用,两种写入方式(当你用指令创建之后)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './pages/Home'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/', // 路径,就是url中访问的地址
name: 'H', // 名字,就是我为这个路由设置一个名字
component: Home // 组件,当浏览器中访问对应的地址时展示的内容
},
{
path: '/list',
name: 'L',
// 异步方式引入的路由组件会在打包的时候生成单独的js文件
// 在使用的时候才会被加载
// 此方法主要用来做性能优化
component: () => import('./pages/List') // 异步引入路由,当访问到此地址的时候才会引入文件
},
] // 定义一个路由内容
})
new Vue({
router, // router: router
render: h => h(App)
}).$mount('#app')
四、创建子路由
- children
{
path: '/user',
component: () => import('./pages/User'),
children: [
{
path: 'info',
name: 'UI',
component: () => import('./pages/User/Info')
},
{
path: 'pwd',
name: 'UPWD',
component: () => import('./pages/User/ChangePwd')
},
}
五、每一个路由对应的页面中都会包含一些路由属性
- $route
表示当前的路由信息,有path,params,query等参数信息 - $router
是一个vue的路由对象,里面包含有一个路由的常见方法,比如push,replace,add等
六、params传参和query传参
是路由传参的两种常见形式。区别在于
- query传参,参数在url中可见,是标准的url传参形式。使用?分割参数和url地址
- params传参,参数在url默认是不可见的。除非设置了占位符
- query传参不怕刷新,刷新之后参数还在
- params传参除非设置了占位符,否则参数不能再刷新之后保存
编程式跳转
使用this.$router.push(路由对象)实现跳转
本文地址:https://blog.csdn.net/Black_snow_ji/article/details/107323324