vue router name命名规范

vue-router基本用法

vue-router的实现原理：

路由不同的页面也就是加载不同的组件。

路由的三个基本概念：

router：它是一条路由，test按钮 => test内容，这是一条route，test1按钮 => test1内容，这是另一条路由。
routers：它是一组路由，把上面的每一条路由组合起来，形成一个数组。[{test按钮 => test内容}, {test1按钮 => test1内容}]。
router：它是一个机制，想当于一个管理者，它来管理路由。当用户点击test按钮时，router去routes中查找，找到对应的test内容。
客户端中的路由，实际上就是dom元素得显示和隐藏。当页面中显示test内容的时候，其他内容全部隐藏，反正也是一样。

vue-router中的路由基于以上4点实现：

在vue中我们所有的内容都是组件化的，所有只需要把路径和组件对应起来，然后在组件中把页面渲染出来就可以了。

通过npm安装vue-router：

npm install --save vue-router

在main.js中使用Vue.use（）加载插件：

important Vue from 'vue
important VueRouter from 'vue-router'Vue.use(VueRouter)

页面实现：

在vue-router中，由两个标签<router-view>和<router-link>来对应点击和显示部分；<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是在点击后匹配的内容显示在什么地方；<router-link>还有一个非常重要的属性to，定义点击之后跳到哪里去。

路由配置：

首先定义route，它是一个对象，由两部分组成：path、component；path指路径，component指组件；代码如下：

const routes = [{ path: '/home', component: Home },{ path: '/list', component: List }
]

创建router对路由进行管理，由构造函数new vueRouter()创建，接收routes参数，代码如下：

const router = new VueRouter({routes: routes   // routers简写
})

配置完成后把router实例注入到vue根实例中，开始使用，代码如下：

const app = new Vue({router
}).$mount('#app')

执行过程：

当点击router-link标签时，会寻找它的to属性，它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件，最后再把组件渲染到 <router-view> 标签所在的地方。

接下来我们简单体验一下（不要忘了安装vue-router）：

<template><div><h1>home</h1><p>{{msg}}</p></div>
</template>
<script>export default {data () {return {msg: "我是home 组件"}}}
</script>

<template><div><h1>list</h1><p>{{msg}}</p></div>
</template>
<script>export default {data () {return {msg: "我是list 组件"}}}
</script>

在App.vue中定义<router-link>和<router-view>

<template><div class="app"><header>// router-link 定义点击导航后到哪个路径下<router-link to="/home">Home</router-link><router-link to="/list">List</router-link></header>// 对应的组件内容渲染到router-view中<router-view></router-view>   </div>
</template><script>
export default {
}
</script>

在src目录下再新建一个router.js定义router，也就是路径到组件的映射

import Vue from "vue";
import VueRouter from "vue-router";// 引入组件
import home from "./home.vue";
import list from "./list.vue";// vue 使用 vueRouter
Vue.use(VueRouter);const routes = [{path:"/home",component: home},{path: "/list",component: list}
]var router =  new VueRouter({routes
})
export default router;

把路由注入到实例中，启动路由；也可以在main.js中引入路由，注入到根实例中

import Vue from 'vue'
import App from './App.vue'// 引入路由
import router from "./router.js"
new Vue({el: '#app',router,  // 注入到根实例中render: h => h(App)
})

既然提到了main.js，在这里简单介绍一下：

main.js在渲染的时候会被webpack引入变成app.js文件。
app.js文件在index.html中会被引入。
执行流程：项目加载的过程是index.html -> main.js -> app.vue -> index.js -> xxx.vue，如果main.js里面有钩子，会先走钩子。

这时就可以实现路由之间的切换了，不过会有一个问题：

首次进入页面的时候，页面没有内容，因为首次进入页面，它的路径是'/'，我们并没有给这个路径做相应的配置，我们要把这个路径指向home，用redirect来定义重定向：

const routes = [{path:"/home",component: home},{path: "/list",component: list},{path: '/',redirect: '/home'}
]

这样页面就正常了，首次加载页面显示home，页面切换也可以看到内容的切换。

嵌套路由

嵌套路由的使用，主要是由我们自己的页面结构决定的；举个栗子：比如我们进入home页面的时候，home页下面还有分类的子页面，当我们点击其中一个子页面的时候，它肯定得到相应的子页面部分。
在路由的设计上，首先进入到home页，然后才能进入到子页面1、子页面2...，相当于home得子元素；所有vue提供了childrens属性，它也是一组路由。
首先我们在home页面上先定义3个router-link标签，定义一个router-view标签用于渲染对应的组件，home.vue代码如下：

<template><div><h1>home</h1>// router-link 的to属性要注意，路由是先进入到home,然后才进入相应的子路由如 page1,所以写的时候要把home带上<p><router-link to="/home/page1">子页面1</router-link><router-link to="/home/page2">子页面2</router-link><router-link to="/home/page3">子页面3</router-link></p><router-view></router-view></div>
</template>

router.js配置路由：

const

这时我们再点击home时，它下面会出现子页面1、子页面2、子页面3，但没有任何对应的组件进行显示，要想在点击home时，渲染相应的子组件，需要再配置一个路由，代码如下：

children: [{path: "page1",component: page1},{path: "page2",component: page2},{path: "page3",component: page3}，// 当进入home时，组件显示{path: "",component: page1}
]

this.$router.push({})实现路由跳转，顺带说一嘴命名路由，我们再写一个路由，代码如下:

{path: "/system/:id",name: "system",component: system
}

在router-link中to属性就可以使用对象了

<router-link to="/system/999">System999</router-link>
// 等同于下面
<router-link :to="{ name: 'system', params: { systemId: 999 }}">System</router-link>   // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定

应用到按钮上跳转另一个组件

<template><div><el-button @click="jumpPage1">跳转子页面1</el-button></div>
</template>
<script>
export default {data () {},methods: {jumpPage1 () {this.$router.push("home")}}
}
</script>

最后

vue-router官方文档学习router.vuejs.org

vue router name命名规范_vue-router使用相关推荐

vue router name命名规范_超完整的Vue入门指导
脚本之家你与百万开发者在一起作者 | kiba518出品 | 脚本之家(ID:jb51net)前言新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一 ...
Vue最全项目命名规范
Vue最全项目规范一.命名规范 1.1 项目文件命名 1.1.1 项目名 1.1.2 目录名 1.1.3 图像文件名 1.1.4 HTML 文件名 1.1.5 CSS 文件名 1.1.6 JavaS ...
Vue目录详解和文件命名规范(超详细)
框架 Vue-cli: 3 axios:发送请求 Vuex:store仓库项目目录结构 dist:生成的打包目录 node_modules:依赖包目录 public: 放置系统的静态文件,比如,图片 ...
vue项目创建步骤和路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
[vue] 说说组件的命名规范
[vue] 说说组件的命名规范定义组件名有两种方式: 1.kebab-case(短横线分隔命名),引用时必须也采用kebab-case: 2.PascalCase(首字母大写命名),引用时既可以采用 ...
创建Vue项目，找不到router文件（router.js）的解决方法
创建Vue项目,找不到router文件(router.js)的解决方法问题描述: 安装 Vue Router 原因分析: 解决方案: 命令窗口创建使用图形化界面问题描述: 如图所示: 安装 Vu ...
前端同学开发中应该知道的命名规范
根据个人阅读官网中的风格指南,整理在实际开发中常用的命名规范,希望可以帮助大家. 1.项目文件命名代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式. 说明:正确的英文拼写和语法可 ...
git flow 命名规范驼峰_图解ThinkPHP5框架(一):基础知识,开发规范与目录结构
php中文网最新课程每日17点准时技术干货分享基于最新ThinkPHP5.0.8制定,原稿是xmind思维导图制作,如果觉得图片看不太清楚,可以下载xmind源文件,用xmind软件打开. 另外, ...
服务器hostname命名规范汇总
服务器hostname命名规范背景说明目前,小组服务器的hostname没有一个标准,通常情况是沿用云机ID.若遇到hostname都是localhost,则修改hostname会比较困惑.特别注 ...

vue router name命名规范_vue-router使用

vue-router基本用法

vue router name命名规范_vue-router使用相关推荐

最新文章

热门文章