Vue之路由
Posted dong-
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue之路由相关的知识，希望对你有一定的参考价值。
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- html5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
Vue Router的安装使用 :
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="d1"></div> <script> //第一步在Vue示例中使用VueRouter Vue.use(VueRouter); let Home = { template: ` <div> <h1>主页</h1> </div> ` }; let Login = { template: ` <div><h1>登录</h1></div> ` }; let Register = { template: ` <div><h1>注册</h1></div> ` }; let App = { //第四步 //router-link会渲染成a标签, to属性相当于href属性, to后面是router中定义的路径 //router-view是页面内容渲染的出口, 路由匹配到的组件将渲染在这里 template: ` <div> <!--直接写路径版 <router-link to="/">首页</router-link> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link>--> <!--命名路由版 <router-link :to="{name: ‘home‘}">首页</router-link> <router-link :to="{name: ‘login‘}">登录</router-link> <router-link :to="{name: ‘register‘}">注册</router-link> <router-view></router-view>--> <!--params是无参数名的传参关键字 query是有参数名的传参关键字 <router-link :to="{name: ‘home‘}">首页</router-link> <router-link :to="{name: ‘login‘,params:{loginId: 1}}">登录</router-link> <router-link :to="{name: ‘register‘,query:{reg: 1}}">注册</router-link> <router-view></router-view>--> </div> `, }; //第二部实例化一个router对象 //本质上是将路径和页面内容绑定一个对应的关系 // 在真实的场景中，可有以下路径形式 // user/1; // user/?userId=1; let router = new VueRouter({ mode: "history", routes: [ { name: "home", path: "/", component: Home, }, { //xxx/参数 name: "login", path: "/login/:loginId", component: Login }, { //xxx/?参数名=参数值 name: "register", path: "/register", component: Register } ] }); new Vue({ el: "#d1", template: `<App/>`, //第三部在根实例对象中注册router对象 router: router, components: { App, } }) </script> </body> </html>
Vue Router子路由 :
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="d1"></div> <script> Vue.use(VueRouter); let Home = { template: `<div><h1>这是主页</h1></div>` }; let Course = { template: ` <div> <h2>课程页面</h2> <router-link :to="{name: ‘python‘}" append>派森</router-link> <router-link :to="{name: ‘linux‘}">linux</router-link> <router-view></router-view> </div>`, }; let Python = { template: `<div><h3>人生苦短,我用派森</h3></div>` }; let Linux = { template: `<div><h3>不会linux岂不是咸鱼</h3></div>` }; let Class = { template: ` <div> <h1>班级页面</h1> <router-link :to="{name: ‘one‘}">一班</router-link> <router-link :to="{name: ‘two‘}">二班</router-link> <router-view></router-view> </div>` }; let One = { template: ` <div> <router-link :to="{name: ‘red‘}">一班啊</router-link> </div>` }; let Two = { template: `<div><h3>二班啊</h3></div>` }; let router = new VueRouter({ routes: [ { name: "home", path: "/", component: Home }, { name: "course", path: "/course", component: Course, children: [ { name: "python", path: "python", component: Python }, { //使用append自动添加前路径的话.子路径名前不能有" / " name: "linux", path: "linux", component: Linux }, { name: "red", path: "red", //重定向页面 redirect: "/", } ] }, { name: "class", path: "/class", component: Class, children: [ { name: "one", path: "/class/one", component: One }, { name: "two", path: "/class/two", component: Two } ] }, ] }); let App = { template:` <div> <router-link :to="{name: ‘home‘}">首页</router-link> <router-link :to="{name: ‘course‘}">课程</router-link> <router-link :to="{name: ‘class‘}">班级</router-link> <router-view></router-view> </div> `, }; new Vue({ el: "#d1", template:`<App/>`, components:{ App, }, router: router }) </script> </body> </html>
以上是关于Vue之路由的主要内容，如果未能解决你的问题，请参考以下文章