- 路由，其实就是指向的意思
- 当我点击页面上的Home按钮时，页面中就要显示home的内容，如果点击页面上的about按钮，页面中就要显示about的内容。
- Home按钮 => home内容，about按钮 => about内容，也可以说是一种映射。
- 所以在页面显示中，有两个部分，一个是需要点击的部分，一个是点击之后，显示点击内容的部分。
- 1、route,它是一条路由，由这个英文单词也可以看出，它是单数，Home按钮 => home内容，这是一条route，about按钮 => about内容,这是另一条路由。
- 2、routes是一组路由，把上面的每一条路由组合起来，形成一个数组。[{Home按钮 => home内容},{about按钮 => about内容}]
- 3、router是一个机制，相当于一个管理者，它来管理路由。因为routes只是定义了一组路由，它放在那里是静止的，当真正来了请求，怎么办？就是当用户点击Home按钮的时候怎么办？这时router就起作用了，它到routes中去查找，去找到对应的home内容，所以页面中就显示了home内容。
- 4、客户端中的路由，实际上就是dom元素的显示和隐藏。当页面中显示home内容的时候，about中的内容全部隐藏，反之也是一样。客户端路由由两种实现方式：基于hash和基于html5 history api.
- 在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。
- 在vue-router中,我们也可以看到它定义了两个标签
- 首先要定义route,一条路由的实现。它是一个对象，最基本的一条路由由两个部分组成： path: component. path 指路径，component 指的是组件。如：{path:'/home',component: home}
-
我们这里有两条路由，组成一个routes:
const routes = [
{ path: '/home',component: Home },{ path: '/about',component: About }
]
-
最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
const router = new VueRouter({
routes // short for routes: routes
})
-
配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由
const app = new Vue({
router
}).$mount('#app')
执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/home',component: Home} path 一一对应，从而找到了匹配的组件， 最后把组件渲染到
import Vue from 'vue'
import Router from 'vue-router'
import Hi from '@/components/Hi' //父
import Hi1 from '@/components/Hi1' //子
import Hi2 from '@/components/Hi2' //子
Vue.use(Router)
export default new Router({
routes: [
{
path:'/',component:Hi,children:[
{path:'/',component:Hi},{path:'hi1',component:Hi1},{path:'hi2',component:Hi2},]
}
]
})
<h3 id="二vue-router参数传递">二、vue-router参数传递
<h4 id="用name传递参数">1、用name传递参数
-
1.在路由文件src/router/index.js里配置name属性。
routes: [
{
path: '/',name: 'index',component: index
}
]
-
2.模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：
{{ $route.name }}
注意：不常用
标签中的to传参
-
用:to
- to前面是带冒号的，后边跟的是一个对象形式的字符串
- name：就是我们在路由配置文件中起的name值
params：就是我们要传的参数，是对象形式，在对象里可以传递多个值。（key:value） -
src/App.vue里的
-
src/router/index.js
{
path: '/',component: index
}
-
src/components/index.vue模板里用$route.params.username进行接收
{{ $route.params.username }}
{{ $route.params.age }}
- “单页面多路由区域操作”，实际需求是这样的，在一个页面里我们有2个以上
-
src/App.vue
-
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',components: {
default:Hello,left:Hi1,right:Hi2
}
}
]
})
-
src/components/Hello.vue
{{ msg }}
-
src/components/Hi1.vue
{{ msg }}
-
src/components/Hi2.vue
{{ msg }}
-
src/App.vue
|
-
1.src/router/index.js配置路由
{
path:'/news/:newsId/:newsTitle',component:news
}
- 传递参数是新闻id(newsId)和新闻标题（newsTitle）
-
2.创建src/components/news组件
{{ msg }}
新闻ID：{{ $route.news.newsId}}
新闻标题：{{ $route.news.newsTitle}}
-
3.src/App.vue
- 希望传递的新闻ID只能是数字的形式
-
加入正则需要在路由配置文件里（src/router/index.js）以圆括号的形式加入
path:'/news/:newsId(d+)/:newsTitle'
加入正则，我们在传递数字以外的其他参数，params.vue组件就没有办法接收到。
- 开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
-
src/router/index.js把原来的component换成redirect参数就可以了
export default new Router({
routes: [
{
path: '/',component: index
},{
path:'/goback',redirect:'/' //跳到index页面
}
]
})
这里我们设置了goback路由，但是它并没有配置任何component（组件），而是直接redirect到path:’/’下了，这就是一个简单的重新定向。
{
path:'/news/:newsId(d+)/:newsTitle',component:news
},{
path:'/goNews/:newsId(d+)/:newsTitle',redirect:'/news/:newsId(d+)/:newsTitle'
}
就像同一个人两个名字而已 -
1.src/router/index.js 给home路径起一个别名，detail
{
path: '/home',component: home,alias: '/detail'
}
2.配置我们的
- redirect:rdirect是直接改变了url的值，把url变成真实的path路径
- alias:url路径没有改变，这种情况更友好，让用户知道自己访问的路径，只是改变了
-
别名请不要用在path为’/’中，如下代码的别名是不起作用的。
{
path: '/',component: index,alias:'/repair'
}
标签
- 1.fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
- 2.fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
- 3.fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧立刻删除。
-
4.fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity .5s;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
opacity: 0;
transition: opacity .5s;
}
-
src/router/index.js
export default new Router({
mode: 'history',routes: []
})
- 1.history： 当你使用history模式时，URL就像正常的url,(http://localhost:8080/news)
2.hash: 默认'hash'值（http://localhost:8080/#/news）
-
1.src/router/index.js
{
path: '*',component: Error
}
这里的path:’*’就是找不到页面时的配置，component是我们新建的一个Error.vue的文件。 - 2.新建404页面
-
src/components/文件夹下新建一个Error.vue的文件
{{ msg }}
{
path:'/news/:newsId(d+)/:newsTitle',component:news,beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();
}
}
- 在news路由里配置了bdforeEnter得钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数
- 1.to:路由将要跳转的路径信息，信息是包含在对象里面的。
- 2.from:路径跳转前的路径信息，也是一个对象的形式。
- 3.next：路由的控制参数，常用的有next(true)和next(false).
- 在配置文件中的钩子函数，只有一个钩子-beforeEnter，如果我们写在模板中就可以有两个钩子函数可以使用：
- beforeRouteEnter：在路由进入前的钩子函数。
-
beforeRouteLeave：在路由离开前的钩子函数。
export default {
name: 'news',data () {
return {
msg: 'news page'
}
},beforeRouteEnter:(to,next)=>{
console.log("准备进入路由模板");
next();
},beforeRouteLeave: (to,next) => {
console.log("准备离开路由模板");
next();
}
}
- this.$router.go(-1)
- this.$router.go(1)
- this.$router.push('/xxx ')
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
