vue笔记（三）vue路由

这里增改转发一篇xing.org1的博客。

1，作用

路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件。

2，安装

本地环境安装路由插件vue-router：npm install vue-router --save-dev

3，配置

在src/router/index.js中：

1：引入，注意这个Router是自定义的名字，这里叫这个名字后，下面会用到

import Vue from 'vue'
import Router from 'vue-router'

2：使用/注册。

Vue.use(Router)

3：配置路由。

export default new Router({
  routes: [
   {
        path : ‘/’,  //到时候地址栏会显示的路径
        name : ‘Home’,
        component :  Home   // Home是组件的名字，这个路由对应跳转到的组件。。注意component没有加“s”.
    },
    {
        path : ‘/content’,
        name : ‘Content’,
        component :  Content
    }
],
    mode: "history"
})

4：引入路由对应的组件位置。

import Home from '@/components/Home'
import Home from '@/components/Content’

5：在main.js中调用index.js的配置。

import router from './router'

6：App.vue页面使用（展示）路由，把这个标签放到对应位置：

<router-view></router-view>

7：路由切换（原来的<a href=”XXX.html”>等地方）：把切换标签和链接改成：

<router-link  to="/">切换到Home组件</router-link> 
<router-link  to="/content">切换到Content组件</router-link>

4，示例代码：

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'//从node_modules里边把vue-resource引入进来，同引入vue文件和引入vue-router一个道理

Vue.config.productionTip = false;
Vue.use(VueResource)

//这样以后，就可以在任何组件页面中使用http了
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//引用router
  template: '<App/>',
  components: { App }
})

src/router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Content from '@/components/Content'
import About from '@/components/About'
import Submit from '@/components/Submit'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/content',
      name: 'Content',
      component: Content
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/submit',
        name: 'Submit',
        component: Submit
    }
  ],
  mode: "history"//干掉地址栏里边的#号键
})

src/router/index.js(router的主要配置文件)

App.vue 展示Vue:

<template>
  <div id="app">
    <app-header></app-header>
    <app-nav></app-nav>
    <!-- 展示router -->
    <router-view></router-view>
    <app-footer></app-footer>
  </div>
</template>

<script>
  import Header from './components/Header'
  import Footer from './components/Footer'
  import Navbar from './components/Navbar'
  export default {
    name: 'app',
    data () {
      return {
        
      }
    },
    components: {//局部注册组件这里，可能会定义多个组件，所以component这个单词加上“s”
      "app-header": Header,
      "app-footer": Footer,
      'app-nav': Navbar
    }
  }
</script>

<style>
  
</style>

App.vue 的router-view 标签

5，补充内容

router.push()的使用：
	在vue里进行导航链接，一种方式是<template></template>内使用如下形式的标签：
		<router-link :to="'/content/'">
			{{ title }}
		</router-link>
	在实际转换为 html 标签的时候，会转化为 <a></a>，里面的 to 属性，就相当于 a 的 href 属性。
	上述是声明式的。第二种方式是：
	router.push(location)
	这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，能回到之前的URL。
	该方法的参数可以是一个字符串路径，或者一个描述地址的对象，如：
	// 字符串
	router.push('home')
	// 对象
	this.$router.push({path: '/login?url=' + this.$route.path});
	// 命名的路由
	router.push({ name: 'user', params: { userId: 123 }})
	// 带查询参数，变成/backend/order?selected=2
	this.$router.push({path: '/backend/order', query: {selected: "2"}});

工作时间缘故，vue相关文章暂时停止更新，这里给出笔者的一个练习demo

地址：

效果如图：

vue笔记（三）vue路由

猜你喜欢