Vue项目6：使用Router

本博客在 Vue项目5 的基础上进行。

 

Router为路由，路由允许我们通过不同的 URL 访问不同的内容。

项目目录结构：

 

1.安装router

cnpm install vue-router -g

2.启动项目

npm run dev

3.使用vue-router

 修改main.js

1）使用vue-router，导入Users和Test页面组件

import VueRouter from 'vue-router'
import Users from './components/Users'
import Test from './components/Test'


Vue.use(VueRouter)

 2）定义路由：‘/’渲染Users组件，‘/test’渲染Test组件 

const routes = [
{path:'/', component: Users},
{path: '/test', component: Test}
]

3）新建VueRouter对象

const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: routes //注意：routes的拼写，不要错写成routers
});

4）创建vue对象和挂载根实例

new Vue({
router,
template: `
<div id="app">
<ul>
<li><router-link to="/">Users</router-link></li>
<li><router-link to="/test">Test</router-link></li>
</ul>
<router-view></router-view>
</div>
`,
}).$mount('#app')

浏览器输出如下：

点击Test链接，地址栏变为localhost:8080/test，页面内容也变成了Test组件的内容，截图如下：

 

 

最后附上main.js、App.vue、Users.vue和Test.vue的完整代码：

 

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import vueResource from 'vue-resource'
import App from './App'
import Users from './components/Users'
import Test from './components/Test'


Vue.config.productionTip = false
Vue.use(vueResource)
Vue.use(VueRouter)

const routes = [
  {path:'/', component: Users},
  {path: '/test', component: Test}
]

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routes //注意：routes的拼写，不要错写成routers
});

/* eslint-disable no-new */
new Vue({
  // el: '#app',
  // components: { App },
  // template: '<App/>'
  router,
  template: `
    <div id="app">
      <ul>
        <li><router-link to="/">Users</router-link></li>
        <li><router-link to="/test">Test</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  `,
}).$mount('#app')

 

App.vue 

<template>
  <div id="app">
    <!-- <test msg="Hello"></test> -->
    <users></users>
  </div>
</template>

<script>
import Test from './components/Test'
import Users from './components/Users'

export default {
  name: 'App',
  components: {
    Test, Users
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

Users.vue

<template>
    <div class="users">
        <h1>Users</h1>
        <!-- 通过输入框添加用户 -->
        <form v-on:submit="addUser">
            <input type="text" v-model="newUser.name" placeholder="Enter Name">
            <br>
            <input type="text" v-model="newUser.email" placeholder="Enter Email">
            <br>
            <input type="submit" value="Submit">
        </form>
        <ul>
            <li v-for='user in users'>
                <input type="checkbox" class="toggle" v-model="user.contacted">
                <span :class="{contacted: user.contacted}">
                    {{user.name}}:{{user.email}} <button v-on:click="deleteUser(user)">x</button>
                </span>
                
            </li>
        </ul>
        <div>
            <input type="button" @click="get()" value="点我异步获取数据(Get)">
        </div>
    </div>
</template>

<script>

export default {
    name: 'users',
    data(){
        return {
            newUser:{},
            users: []
        }
    },
    methods:{
        addUser: function(e){
            console.log('add User');//控制台打印输出log
            //将输入的内容添加到用户users中
            this.users.push({
                name: this.newUser.name,
                email: this.newUser.email,
                contacted: false
            });
            e.preventDefault();//添加这句才看到console有输出
        },
        deleteUser: function(user){
            this.users.splice(this.users.indexOf(user),1);//删除用户，indexOf为删除哪个用户，1为删除1条数据
        },
         get:function(){
            //发送get请求
            this.$http.get('https://jsonplaceholder.typicode.com/users').then(function(res){
                this.users=res.data; 
                console.log(res.data);   
            },function(){
                console.log('请求失败处理');
            });
         }

    }

}
</script>

<style scoped>
    .contacted{
        text-decoration: line-through;
    }
</style>

 

Test.vue

<template>
    <div class="test">
        <input type="text" v-model="title"><br />
        <h1>{{title}}</h1>
        <span v-html="title1"></span>
        <p v-if="showName">{{user.firstName}}</p>
        <p v-else>Nobody</p>
        <p v-text="user.firstName"></p>
        <ul>
            <li v-for="item in items">{{item.title}}</li>
        </ul>
        <button v-on:click="greet('Hello World11')">Say Greeting</button>
        <br>
        <input type="text" v-on:keyup="preesKey" v-on:keyup.enter="enterHit">
        <hr>
        <label>firstName</label><input type="text" v-model="user.firstName">
        <br>
        <label>lastName</label><input type="text" v-model="user.lastName">
        <br>
        <h3>{{fullName}}</h3>
        <h2>{{msg}}</h2>
    </div>
</template>

<script>

export default {
    name: 'test',
    props: {
        msg:{
            type: String,
            default: 'Foolbar'
        }
    },
    data(){
        return {
            title: 'Hello world',
            title1:'<h1>Html title</h1>',
            user:{
                firstName:'John',
                lastName:'Doe'
            },
            showName: true,
            items: [
                {title: 'Item One'},
                {title: 'Item Two'},
                {title: 'Item three'}

            ]
        }
    },
    methods:{
        greet: function(greeting){
            alert(greeting);
        },
        preesKey: function(e){
            console.log(e.target.value);
        },
        enterHit: function(){
            console.log('You hit enter');
        }
    },
    computed: {
        fullName: function(){
            return this.user.firstName + ' ' + this.user.lastName;
        }
    }
}
</script>

<style scoped>

</style>

 

 

 

完成！ enjoy it！