vue路由详解 --基础

1.router-link 和router-view组件

router-link相当于封装了一个a标签

router-view为组件显示的位置

 <router-link to="/"></router-link><keep-alive><router-viewclass="mycont"v-if="$route.meta.keepAlive"to="/altogether"></router-view>

const routes = [{path: "/",name: "Home",component: Home,},{path: "/about", //组件路由name: "About",// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.//渲染的组件component: () =>import(/* webpackChunkName: "about" */ "../views/About.vue"),//起到懒加载的作用},
];

2.路由配置

动态路由

$route.params.name中$route为当前路由对象，params为参数对象，name为具体参数名

//router里{path: "/argu/:name",components: {default: () => import("@/views/argu.vue"),},},//argu.vue里接收参数
<template><div>{{$route.params.name}}</div>
</template>
<script>
export default {}
</script>

$route代表当前路由对象，包含一个params参数，name为动态路由的参数，

嵌套路由

父级

<template><div>I am parent<router-view /></div>
</template>
<script>
export default {}
</script>

子级

<template><div>I am child</div>
</template>
<script>
export default {}
</script>

路由

 {path: "/parent",component: () => import("@/views/parent.vue"),children:[{path: "child",component: () => import("@/views/child.vue"),},]},

view视图

命名路由

路由

{path: "/",name: "Home",component: Home,},{path: "/about", //组件路由name: "About",// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.//渲染的组件component: () =>import(/* webpackChunkName: "about" */ "../views/About.vue"),},

页面

 <div id="nav"><router-link :to="{ name:'Home' }">Home</router-link> |<router-link :to="{ name:'About' }">About</router-link></div>

这种方式也可以实现路由跳转

命名视图

路由

{path: "/name_view",components:{default:() =>import('@/views/child.vue'),email:() =>import('@/views/email.vue'),tel:() =>import('@/views/tel.vue'),}
}

页面

    <router-view/><router-view name="email"/><router-view name="tel"/>

视图

页面重定向

路由

{path:"/main",redirect: "/",//也可以是命名路由// redirect: {//   name:"Home"// }//也可以是函数形式如下：// redirect: to => ‘/’
}

别名

{path: "/",alias: '/home_page',name: "Home",component: Home,
},

3.JS操作路由

<template><div class="home"><!-- <img alt="Vue logo" src="../assets/logo.png" /> --><!-- <HelloWorld msg="Welcome to Your Vue.js App" /> --><button @click="handleClick('back')">返回上一页</button><button @click="handleClick('push')">跳转到parent</button><button @click="handleClick('replace')">替换到parent</button></div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";export default {name: "Home",components: {HelloWorld,},methods: {handleClick(type) {if(type === 'back'){this.$router.go(-1);//this.router.back(-1);}else if(type === 'push'){const name ='lison';this.$router.push({//在历史中保留当前// name:'parent',// query:{//   name:'lison'// }// name:'argu',// params:{//   name:'lison'// }//在路由后带动态参数时，如果用path，则不可以使用params，带的参数无效，用name则可以带paramspath:`/argu/${name}`});}else if(type === 'replace'){//历史中不保留直接替换掉this.$router.push('/parent');}}}
};
</script>

4.重定向和别名

别名在router中加alias属性；

 {path: "/",alias: '/home_page',name: "Home",component: Home,},

重定向：

{path:"/main",redirect: "/",//也可以是命名路由// redirect: {//   name:"Home"// }//也可以是函数形式如下：// redirect: to => ‘/’}

动态路由参数在页面中显示

router中

{path: "/argu/:name",name:'argu',component: () => import("@/views/argu.vue"),props:true//将route的params作为组件属性},

页面

<template><div>{{name}}</div>
</template>
<script>
export default {props:{name:{type:String,default:'lison'}}
}
</script>

vue路由详解 --基础相关推荐

Vue路由详解与映射关系 Vue-Router
Vue-Router 前端路由认识路由 vue-router 基本使用 vue-router 嵌套路由 vue-router 参数传递 vue-router 导航守卫 keep-alive //分割 ...
reactrouter4路由钩子_react router @4 和 vue路由详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...
vue路由详解版一目了然
概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路由分 ...
React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
Electron vue使用详解
Electron vue使用详解 Electron是什么? Electron 是一个框架,可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序. 然后这些应用程序可以打包在m ...
Ocelot简易教程（三）之主要特性及路由详解
作者:依乐祝原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
bt协议详解基础篇（上）
bt协议详解基础篇(上) 最近开发了一个免费教程的网站,产生了仔细了解bt协议的想法,所以写了这一篇文章,后续还会写一些关于搜索和索引的东西,都是在开发这个网站的过程中学习到的技术,敬请期待. 1 ...

vue路由详解 --基础

vue路由详解 --基础相关推荐

最新文章

热门文章