vue笔记-17（vue路由基础）

什么是路由
1. 后端路由：对于普通的网站，所有的超链接倒是URL地址，所有的URL地址都对应服务器上对应的资源
2. 前端路由：对于单页面应用程序来说，主要通过URL中的HASH(#号)来实现不同页面之间的切换，同事hash有一个特定：HTTP请求不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现
3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

vue-router路由的基本使用

安装vue-router路由模块

创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter。在new路由对象的时候可以为构造函数，传递一个配置对象

//组件模板对象
var login = {
    template : '<h1>登录组件</h1>'
}
var register = {
    template : '<h1>注册组件</h1>'
}

var routerObj = new VueRouter({
    //route //这个配置对象中的route表示【路由匹配规则】的意思
    routes: [
        { 
            path : '/login' , //属性1path表示监听哪个路由链接地址
            component: login //属性2component表示如果路由是前面匹配到的Path，则展示component属性对应的那个组件。并且component的属性值必须是组件的模板对象，不能是组件的应用名称
            },{
                path: '/register',
                component: 'register'
            }
    ]
})

创建Vue实例，得到ViewModel

var vm  = new Vue({
    el: '#app',
    data: {},
    methods: {},
    router: routerObj //将路由规则对象注册到vm实例上，用来监听url地址变化，然后展示对应的组件
})

使用router-view组件来显示匹配到的组件

<a href="#/login">登录</a>
<a href="#/register">注册</a>

<!-- 这是vue-route提供的元素，专门用来当做占位符的，将来路由规则匹配到的组件，就会展示到这个router-view中去，所以我们可以把router-view认为是一个占位符-->
<router-view></router-view>

使用router-link跳转,默认为一个a标签，可以使用tag渲染为其他的标签

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

使用redirect属性

var routerObj = new VueRouter({
    //route //这个配置对象中的route表示【路由匹配规则】的意思
    routes: [
        { path : '/', component: login },
        { path : '/', redirect: '/login' } //这里和node中的redirect两码事
    ]
})

7.完整代码demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-router基础</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="./lib/vue-router.js"></script>
</head>
<body>
  <div id="app">
      <!--控制路由的链接,#表示是vue-router 前端路由的默认跳转使用hash实现-->
      <h2 style="color: red;">使用a链接跳转</h2>
      <a href="#/login">登录</a>
      <a href="#/register">注册</a>

      <br/>
      <br />

      <h2 style="color: red;">使用router-link跳转</h2>
      <!--如果不想再跳转链接上使用#,可以使用router-link-->
      <!--router-link默认的html标签是一个a标签，可以通过tag指定使用其他标签,比如span-->
      <router-link to="/login" tag="span">登录</router-link>
      <router-link to="/register" tag="span">注册</router-link>

      <!--展示路由组件的元素-->
      <router-view></router-view>
  </div>

  <script>
      var login = {
          template: '<h1>登录组件</h1>'
      }

      var register = {
          template: '<h1>注册组件</h1>'
      }

      //定义VueRouter变量
      var routerObj = new VueRouter({
          routes:[
              // { path: '/', component: login }, //指定当前页面跟路径默认跳转的路由组件,component方式指定
              { path:'/', redirect: '/register'}, //指定当前页面跟路径默认跳转的路由组件，redirect方式指定
              {
                  path: '/login',
                  component: login //通过component指定路由跳转到的组件
              },{
                  path: '/register',
                  component: register
              }
          ]
      })
      var vm = new Vue({
          el: '#app', 
          data: {},
          methods:{},
          router: routerObj
      })
  </script>
</body>
</html>

vue笔记-17（vue路由基础）

友情链接更多精彩内容