标签：包含 url none 判断 back 改变 lis xxx 后台
1、路由：
官方提供一个插件，构建单页面应用，主要实现得功能页面得切换、组件得跳转
2、vue中得路由：vue-router包，如果是脚手架进行搭建得，那么是不需要安装vue-router这个包得，因为里边已经配置安装好了
3、scr中得router文件中的index.js就是直接放路由得文件，所有的路由配置全部都是再这个文件中进行配置的，用的话实在组件中进行使用的
4、不管是使用组件也好，还是使用路由也好，都是需要创建一个组件或者是路由实例的
都需要使用new来完成
import Router from ‘vue-router‘ //引入路由构造器
Vue.use(Router)
export default new Router() //路由实例
5、路由的原理：
根据url的路径变化，从而获取显示对应的组件
通过改变url，再不更新页面的情况下，更新页面中视图
6、vue中的路由实现：
hash模式：根据的是#后的值进行判断的，再读取的时候使用的是window.location.hash进行读取的
特点：hash是再url中的，但是不被包含在http的请求中，hash不会重新加载页面
http://www.xxx.com/#/test（默认是hash模式的）
history模式：把#去掉了，直接再后边显示的是/，再请求的时候是一起进行请求的，但是一般如果要使用的是history模式，那么必要要保证前端
URL和向后台发起的URL一致才行，只有再这种情况下才能请求到数据，否则返回的是404：http://www.xxx.com/test
mode：‘history‘(有的浏览器是不支持的)
7、使用路由步骤：
现在router配置文件中进行配置
然后再在入口文件中引入路由，其他组件才能使用
使用router-link-->a标签
to：跳转得路径，和path中定义的内容是一致的
name进行跳转，{name:‘‘}
使用router-view标签给vue组件提供跳转的容器
8、如果有二级路由的话：
需要使用children在index.js文件中进行配置的
9、子路由在哪个路径下边，那么我们就需要把router-view放在哪个组件中，否则的话这个子路由是没有办法显示出来的
10、命名视图
一个路由显示多个组件：
components，同时告诉浏览器，哪个组件显示在哪个view中，使用的是name属性来实现的
案例：
// index.js -router
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Home from ‘@/components/Home‘ import About from ‘@/components/About‘ import Nava from ‘@/components/nava‘ import Product from ‘@/components/product‘ import Footer from ‘@/components/Footera‘ import Contenta from ‘@/components/contenta‘ Vue.use(Router) export default new Router({ mode: ‘history‘, routes: [ { path: ‘/‘, name: ‘Home‘, components: { default:Home, contenta:Contenta, //命名视图 footer:Footer } }, { path: ‘/about‘, name: ‘About‘, component: About, children:[ //子组件路由 { path:‘/about/nava‘, name:"nava", component:Nava },{ path:‘/about/product‘, name:"product", component:Product } ] } ] })
这是App父页面
<template> <div id=‘app‘> <ul> <!-- <li><router-link to="/">首页</router-link></li> <li><router-link to="/about">abuot</router-link></li> --> //第一种方法
<li><router-link :to="{name:‘Home‘}">首页</router-link></li> //第二种 ：to=“｛｝” <li v-navDown><router-link :to="{name:‘About‘}">abuot</router-link> <ul> <li> <router-link to="/about/nava">NAva</router-link> // 子路由 </li> <li> <router-link to="/about/product">公司产品</router-link></li> //子路由 </ul> </li> </ul> <router-view name="default"></router-view> //命名视图 <router-view name="contenta"></router-view> <router-view name="footer"></router-view> </div> </template> <script> import $ from ‘jquery‘ export default { name: ‘App‘, data () { return { } }, directives:{ ‘navDown‘:{ inserted (el) { el.addEventListener(‘mouseenter‘,function(){ $(el).children(‘ul‘).slideDown() }) el.addEventListener(‘mouseleave‘,function(){ $(el).children(‘ul‘).slideUp() }) } } } } </script> <style> .test{ color:skyblue; } li{ width: 500px; height: 20px; background: pink; } li ul{ display: none; } </style>
//显示子页面
<template> <div>我是about <router-view></router-view> //直接显示子页面 </div> </template>
标签：包含 url none 判断 back 改变 lis xxx 后台
原文地址：https://www.cnblogs.com/taozhibin/p/13160693.html
