一，路由

 1、Vue的路由的定义：相当于就是用来跳转组件，起一个链接的作用。

 2、为什么要使用Vue路由？以下图为例在以后的Html前后端分离的项目中都是使用的是SPA单页面，在一个页面中，一个界面含有大量代码，可以使界面简介，这就可以使用Vue路由。

     3、Vue路由实现步骤：

 1、确保引入Vue vue-router的js依赖

2、首先要定义组件（就是展示不同的页面的效果）

3、需要将不同的组件放入一个容器中

4、将路由集合组装成路由器

5、将路由挂载到Vue容器中

6、定义锚点

7、跳转

实操：

 1、确保引入Vue vue-router的js依赖：

        <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

2、首先要定义组件（就是展示不同的页面的效果）：

    /* 2.定义需要用到的组件 */
            const Home = Vue.extend({
                template: "<div><p>这是博客内容页面</p><div>具体的博客内容</div></div>"
            });
 
            const About = Vue.extend({
                template: "<div><p>这是关于本站页面</p><div>本站的意义，发展史</div></div>"
            });

3、需要将不同的组件放入一个容器中：

    let routes = [{
                path: '/',
                component: Home
            }, {
                path: '/Home',
                component: Home
 
            }, {
                path: '/About',
                component: About
 
            }];

4、将路由集合组装成路由器：

    /* 4.得到路由对象*/
             const router=new VueRouter({routes:routes});

5、将路由挂载到Vue容器中:

/* 5.将路由挂载啊到Vue容器中*/
                第一种方式：router,
                第二种方式：router：router； 

6、定义锚点:

<!-- /* 6.定义锚点 */ -->
            <router-view ></router-view>

7、跳转：

<!-- /* 7.路由组件跳转触发点 */ -->
            <router-link to="/" replace>首页</router-link>
            <router-link to="/About">关于本站</router-link>

8、注意点：

const是用来修饰对象的

let是用来修饰非对象的

运行结果：两个链接可以相互切换 

 二，无痕浏览

  1、关于无痕浏览：意思就是我们点击回退时就不会显示上一次的浏览

   2、只要在<router-link to="/" replace>首页</router-link>这里在一个关键字replace，就可以实现无痕浏览功能了。

<router-link to="/" replace>首页</router-link>

效果：点击多次后，当点击返回上一级时：当从关于本站点击到首页，再从首页键按返回键已经不能返回到上一次浏览记录了。

标签：vue,浏览,Vue,无痕,组件,router,路由,页面
来源： https://blog.csdn.net/xyy_0517/article/details/121137880