精华内容
下载资源
问答
  • 前端将vue路由模式改为history模式后需要运维配置才能正常访问,配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$...
  • vue路由配置:1.安装npm install vue-router --save / cnpm install vue-router --save2、引入并 Vue.use(VueRouter) (main.js)import VueRouter from 'vue-router'Vue.use(VueRouter)3、配置路由1、创建组件 引入...

    vue路由配置:

    1.安装

    npm install vue-router --save / cnpm install vue-router --save

    2、引入并 Vue.use(VueRouter) (main.js)

    import VueRouter from 'vue-router'

    Vue.use(VueRouter)

    3、配置路由

    1、创建组件 引入组件

    2、定义路由 (建议复制s)

    const routes = [

    { path: '/foo', component: Foo },

    { path: '/bar', component: Bar },

    { path: '*', redirect: '/home' } /*默认跳转路由*/

    ]

    3、实例化VueRouter

    const router = new VueRouter({

    routes // (缩写)相当于 routes: routes

    })

    4、挂载

    new Vue({

    el: '#app',

    router,

    render: h => h(App)

    })

    5 、根组件的模板里面放上这句话

    6、路由跳转

    Go to Foo

    Go to Bar

    代码实现如下

    src/components/Home.vue

    我是首页组件

    export default{

    data(){

    return {

    msg:'我是一个home组件'

    }

    }

    }

    src/components/News.vue

    我是新闻组件

    export default{

    data(){

    return {

    msg:'我是一个新闻组件'

    }

    }

    }

    App.vue

    首页

    新闻


    export default {

    data () {

    return {

    msg:'你好vue'

    }

    }

    }

    main.js

    import Vue from 'vue';

    import App from './App.vue';

    import VueRouter from 'vue-router';

    Vue.use(VueRouter);

    //1.创建组件

    import Home from './components/Home.vue';

    import News from './components/News.vue';

    //2.配置路由 注意:名字

    const routes = [

    { path: '/home', component: Home },

    { path: '/news', component: News },

    { path: '*', redirect: '/home' } /*默认跳转路由*/

    ]

    //3.实例化VueRouter 注意:名字

    const router = new VueRouter({

    routes // (缩写)相当于 routes: routes

    })

    //4、挂载路由

    new Vue({

    el: '#app',

    router,

    render: h => h(App)

    })

    //5 放在 App.vue

    Vue动态路由get传参

    src/components/Content.vue

    我是详情页面

    export default{

    data(){

    return{

    msg:'数据'

    }

    },

    mounted(){

    console.log(this.$route.params); /*获取动态路由传值*/

    }

    }

    src/components/Home.vue

    我是首页组件

    • {{key}}--{{item}}

    export default{

    data(){

    return {

    msg:'我是一个home组件',

    list:['商品111111','商品222222','商品333333']

    }

    }

    }

    src/components/News.vue

    我是新闻组件

    • {{key}}--{{item}}

    export default{

    data(){

    return {

    msg:'我是一个新闻组件' ,

    list:['111111','222222','333333']

    }

    }

    }

    src/components/Pcontent.vue

    商品详情

    export default{

    data(){

    return{

    msg:'数据'

    }

    },

    mounted(){

    //获取get传值

    console.log(this.$route.query);

    }

    }

    App.vue

    首页

    新闻


    /*1、不同路由传值:动态路由

    1、配置动态路由

    routes: [

    // 动态路径参数 以冒号开头

    { path: '/user/:id', component: User }

    ]

    2、在对应的页面

    this.$route.params获取动态路由的值

    */

    export default {

    data () {

    return {

    msg:'你好vue'

    }

    }

    }

    main.js

    import Vue from 'vue';

    import App from './App.vue';

    import VueRouter from 'vue-router';

    Vue.use(VueRouter);

    //1.创建组件

    import Home from './components/Home.vue';

    import News from './components/News.vue';

    import Content from './components/Content.vue';

    import Pcontent from './components/Pcontent.vue';

    //2.配置路由 注意:名字

    const routes = [

    { path: '/home', component: Home },

    { path: '/news', component: News },

    { path: '/content/:aid', component: Content }, /*动态路由*/

    { path: '/pcontent', component: Pcontent },

    { path: '*', redirect: '/home' } /*默认跳转路由*/

    ]

    //3.实例化VueRouter 注意:名字

    const router = new VueRouter({

    routes // (缩写)相当于 routes: routes

    })

    //4、挂载路由

    new Vue({

    el: '#app',

    router,

    render: h => h(App)

    })

    //5 放在 App.vue

    vue路由结合请求数据 实现新闻列表 新闻详情数据渲染

    代码如下

    src/components/Content.vue

    {{list.title}}

    export default{

    data(){

    return{

    msg:'数据',

    list:[]

    }

    },

    mounted(){

    // console.log(this.$route.params); /*获取动态路由传值*/

    var aid=this.$route.params.aid;

    //调用请求数据的方法

    this.requestData(aid);

    },

    methods:{

    requestData(aid){

    //get请求如果跨域的话 后台php java 里面要允许跨域请求

    var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;

    this.$http.get(api).then((response)=>{

    console.log(response);

    this.list=response.body.result[0];

    },(err)=>{

    console.log(err)

    })

    }

    }

    }

    #content{

    padding:1rem;

    line-height:2;

    img{

    max-width:100%;

    }

    }

    Home.vue

    我是首页组件

    export default{

    data(){

    return {

    msg:'我是一个home组件'

    }

    }

    }

    src/component/News.vue

    我是新闻组件

    • {{item.title}}

    export default{

    data(){

    return {

    msg:'我是一个新闻组件' ,

    list:[]

    }

    },

    methods:{

    requestData(){

    //jsonp请求的话 后台api接口要支持jsonp

    var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

    this.$http.jsonp(api).then((response)=>{

    console.log(response);

    //注意:用到this要注意this指向

    this.list=response.body.result;

    },function(err){

    console.log(err);

    })

    }

    },

    mounted(){

    this.requestData();

    }

    }

    .list{

    li{

    height:3.4rem;

    line-height:3.4rem;

    boder-bottom:1px solid #eee;

    font-size:1.6rem;

    a{

    color:#666;

    }

    }

    }

    App.vue

    首页

    新闻


    /*1、不同路由传值:动态路由

    1、配置动态路由

    routes: [

    // 动态路径参数 以冒号开头

    { path: '/user/:id', component: User }

    ]

    2、在对应的页面

    this.$route.params获取动态路由的值

    */

    export default {

    data () {

    return {

    msg:'你好vue'

    }

    }

    }

    .header{

    height:4.4rem;

    background:#000;

    color:#fff;

    line-height:4.4rem;

    text-align:center;

    a{

    color:#fff;

    padding:0 2rem

    }

    }

    main.js

    import Vue from 'vue';

    import App from './App.vue';

    //引入公共的scss 注意:创建项目的时候必须用scss

    import './assets/css/basic.scss';

    //请求数据

    import VueResource from 'vue-resource';

    Vue.use(VueResource);

    import VueRouter from 'vue-router';

    Vue.use(VueRouter);

    //1.创建组件

    import Home from './components/Home.vue';

    import News from './components/News.vue';

    import Content from './components/Content.vue';

    //2.配置路由 注意:名字

    const routes = [

    { path: '/home', component: Home },

    { path: '/news', component: News },

    { path: '/content/:aid', component: Content }, /*动态路由*/

    { path: '*', redirect: '/home' } /*默认跳转路由*/

    ]

    //3.实例化VueRouter 注意:名字

    const router = new VueRouter({

    routes // (缩写)相当于 routes: routes

    })

    //4、挂载路由

    new Vue({

    el: '#app',

    router,

    render: h => h(App)

    })

    //5 放在 App.vue

    vue路由编程式的导航 以及vue路由HIstory模式 hash模式

    {{list.title}}

    export default{

    data(){

    return{

    msg:'数据',

    list:[]

    }

    },

    mounted(){

    // console.log(this.$route.params); /*获取动态路由传值*/

    var aid=this.$route.params.aid;

    //调用请求数据的方法

    this.requestData(aid);

    },

    methods:{

    requestData(aid){

    //get请求如果跨域的话 后台php java 里面要允许跨域请求

    var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;

    this.$http.get(api).then((response)=>{

    console.log(response);

    this.list=response.body.result[0];

    },(err)=>{

    console.log(err)

    })

    }

    }

    }

    #content{

    padding:1rem;

    line-height:2;

    img{

    max-width:100%;

    }

    }

    我是首页组件

    通过js跳转到新闻页面

    export default{

    data(){

    return {

    msg:'我是一个home组件'

    }

    },

    methods:{

    goNews(){

    // 注意:官方文档写错了

    //第一种跳转方式

    // this.$router.push({ path: 'news' })

    // this.$router.push({ path: '/content/495' });

    //另一种跳转方式

    // { path: '/news', component: News,name:'news' },

    // router.push({ name: 'news', params: { userId: 123 }})

    this.$router.push({ name: 'news'})

    }

    }

    }

    我是新闻组件

    • {{item.title}}

    export default{

    data(){

    return {

    msg:'我是一个新闻组件' ,

    list:[]

    }

    },

    methods:{

    requestData(){

    //jsonp请求的话 后台api接口要支持jsonp

    var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

    this.$http.jsonp(api).then((response)=>{

    console.log(response);

    //注意:用到this要注意this指向

    this.list=response.body.result;

    },function(err){

    console.log(err);

    })

    }

    },

    mounted(){

    this.requestData();

    }

    }

    .list{

    li{

    height:3.4rem;

    line-height:3.4rem;

    boder-bottom:1px solid #eee;

    font-size:1.6rem;

    a{

    color:#666;

    }

    }

    }

    首页

    新闻


    /*1、不同路由传值:动态路由

    1、配置动态路由

    routes: [

    // 动态路径参数 以冒号开头

    { path: '/user/:id', component: User }

    ]

    2、在对应的页面

    this.$route.params获取动态路由的值

    */

    export default {

    data () {

    return {

    msg:'你好vue'

    }

    }

    }

    .header{

    height:4.4rem;

    background:#000;

    color:#fff;

    line-height:4.4rem;

    text-align:center;

    a{

    color:#fff;

    padding:0 2rem

    }

    }

    import Vue from 'vue';

    import App from './App.vue';

    //引入公共的scss 注意:创建项目的时候必须用scss

    import './assets/css/basic.scss';

    //请求数据

    import VueResource from 'vue-resource';

    Vue.use(VueResource);

    import VueRouter from 'vue-router';

    Vue.use(VueRouter);

    //1.创建组件

    import Home from './components/Home.vue';

    import News from './components/News.vue';

    import Content from './components/Content.vue';

    //2.配置路由 注意:名字

    const routes = [

    { path: '/home', component: Home },

    { path: '/news', component: News,name:'news' },

    { path: '/content/:aid', component: Content }, /*动态路由*/

    { path: '*', redirect: '/home' } /*默认跳转路由*/

    ]

    //3.实例化VueRouter 注意:名字

    const router = new VueRouter({

    mode: 'history', /*hash模式改为history*/

    routes // (缩写)相当于 routes: routes

    })

    //4、挂载路由

    new Vue({

    el: '#app',

    router,

    render: h => h(App)

    })

    //5 放在 App.vue

    Vue中路由的嵌套

    component组件

    {{list.title}}

    export default{

    data(){

    return{

    msg:'数据',

    list:[]

    }

    },

    mounted(){

    // console.log(this.$route.params); /*获取动态路由传值*/

    var aid=this.$route.params.aid;

    //调用请求数据的方法

    this.requestData(aid);

    },

    methods:{

    requestData(aid){

    //get请求如果跨域的话 后台php java 里面要允许跨域请求

    var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;

    this.$http.get(api).then((response)=>{

    console.log(response);

    this.list=response.body.result[0];

    },(err)=>{

    console.log(err)

    })

    }

    }

    }

    #content{

    padding:1rem;

    line-height:2;

    img{

    max-width:100%;

    }

    }

    我是首页组件

    通过js跳转到新闻页面

    export default{

    data(){

    return {

    msg:'我是一个home组件'

    }

    },

    methods:{

    goNews(){

    // 注意:官方文档写错了

    //第一种跳转方式

    // this.$router.push({ path: 'news' })

    // this.$router.push({ path: '/content/495' });

    //另一种跳转方式

    // { path: '/news', component: News,name:'news' },

    // router.push({ name: 'news', params: { userId: 123 }})

    this.$router.push({ name: 'news'})

    }

    }

    }

    我是新闻组件

    • {{item.title}}

    export default{

    data(){

    return {

    msg:'我是一个新闻组件' ,

    list:[]

    }

    },

    methods:{

    requestData(){

    //jsonp请求的话 后台api接口要支持jsonp

    var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

    this.$http.jsonp(api).then((response)=>{

    console.log(response);

    //注意:用到this要注意this指向

    this.list=response.body.result;

    },function(err){

    console.log(err);

    })

    }

    },

    mounted(){

    this.requestData();

    }

    }

    .list{

    li{

    height:3.4rem;

    line-height:3.4rem;

    boder-bottom:1px solid #eee;

    font-size:1.6rem;

    a{

    color:#666;

    }

    }

    }

    • 增加用户

    • 用户列表

    export default{

    data(){

    return {

    msg:'我是一个user组件'

    }

    }

    }

    .user{

    display:flex;

    .left{

    width:200px;

    min-height:400px;

    border-right:1px solid #eee;

    li{

    line-height:2;

    }

    }

    .right{

    flex:1;

    }

    }

    component/user/UserAdd.vue

    增加用户

    component/user/UserList.vue

    用户列表

    App.vue

    首页

    新闻

    用户


    export default {

    data () {

    return {

    msg:'你好vue'

    }

    }

    }

    .header{

    height:4.4rem;

    background:#000;

    color:#fff;

    line-height:4.4rem;

    text-align:center;

    a{

    color:#fff;

    padding:0 2rem

    }

    }

    import Vue from 'vue';

    import App from './App.vue';

    //引入公共的scss 注意:创建项目的时候必须用scss

    import './assets/css/basic.scss';

    /*路由的嵌套

    1.配置路由

    {

    path: '/user',

    component: User,

    children:[

    { path: 'useradd', component: UserAdd },

    { path: 'userlist', component: Userlist }

    ]

    }

    2.父路由里面配置子路由显示的地方

    */

    //请求数据

    import VueResource from 'vue-resource';

    Vue.use(VueResource);

    import VueRouter from 'vue-router';

    Vue.use(VueRouter);

    //1.创建组件

    import Home from './components/Home.vue';

    import News from './components/News.vue';

    import Content from './components/Content.vue';

    import User from './components/User.vue';

    import UserAdd from './components/User/UserAdd.vue';

    import Userlist from './components/User/Userlist.vue';

    //2.配置路由 注意:名字

    const routes = [

    { path: '/home', component: Home },

    { path: '/news', component: News,name:'news' },

    {

    path: '/user',

    component: User,

    children:[

    { path: 'useradd', component: UserAdd },

    { path: 'userlist', component: Userlist }

    ]

    },

    { path: '/content/:aid', component: Content }, /*动态路由*/

    { path: '*', redirect: '/home' } /*默认跳转路由*/

    ]

    //3.实例化VueRouter 注意:名字

    const router = new VueRouter({

    mode: 'history', /*hash模式改为history*/

    routes // (缩写)相当于 routes: routes

    })

    //4、挂载路由

    new Vue({

    el: '#app',

    router,

    render: h => h(App)

    })

    //5 放在 App.vue

    展开全文
  • 前端将vue路由模式改为history模式后需要运维配置才能正常访问,配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$ ...

    前端将vue路由模式改为history模式后需要运维配置才能正常访问,配置信如下

     location / {
                root   html;
                index  index.html index.htm;
                try_files $uri $uri/ @rewrites;
            }
            location @rewrites {
                rewrite ^(.+)$ /index.html last;
            }
    
    

    经测试,可以正常访问

    展开全文
  • vue后台路由动态配置

    2021-04-22 15:41:51
    vue+elementUI后台路由动态配置 做了好几个项目都需要根绝用户角色做动态路由配置 1.现在附上页面的实现,其中根据路由表生成右侧复选框需要的数据,在改变复选框状态后,将已经勾选的路由名字传递给后台; 2.不同...

    vue+elementUI后台路由动态配置

    做了好几个项目都需要根据用户角色做动态路由配置

    在这里插入图片描述
    1.现在附上页面的实现,其中根据路由表生成右侧复选框需要的数据,在改变复选框状态后,将已经勾选的路由名字传递给后台;
    在这里插入图片描述在这里插入图片描述

    2.不同用户登录后,在路由守卫时根据用户信息接口查到的可访问的路由的名字,去生成对应路由,加入到路由表中
    在这里插入图片描述

    <template>
      <div class="role">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="left_box">
              <div slot="header" class="clearfix">
                <span class="header_title">角色</span>
              </div>
              <el-button type="primary" @click="handleAddOrEdit"><i class="el-icon-plus"></i>添加角色</el-button>
              <el-tree ref="tree" class="filter-tree" highlight-current node-key="id"
                       :data="leftTree" :current-node-key="currentNode.key"
                       :props="defaultProps" @node-click="handleNodeClick"
                       default-expand-all :expand-on-click-node="false">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                  <span>
                      <el-button
                        type="text" @click.stop="handleAddOrEdit($event,data)">
                        <i class="el-icon-edit"></i>
                      </el-button>
                      <el-button class="delete_btn"
                                 type="text" @click.stop="handleDelete(node, data)">
                        <i class="el-icon-delete"></i>
                      </el-button>
                    </span>
                </div>
              </el-tree>
            </el-card>
          </el-col>
          <el-col :span="18">
            <el-card class="right_box">
              <div slot="header" class="clearfix">
                <span class="header_title"><template v-if="currentNode.name">{{currentNode.name}} - </template>权限配置</span>
              </div>
              <div class="auth_config">
                <el-card class="config_card" shadow="never" v-for="(item,itemIndex) in accessibleRouter" :key="itemIndex">
                  <div slot="header" class="clearfix">
                    <i :class="item.icon" @click="showOrPackUp(item,itemIndex)"></i>
                    <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll"
                                 @change="(value)=>handleCheckAllChange(value,item,itemIndex)">{{item.label}}
                    </el-checkbox>
                  </div>
                  <el-checkbox-group v-show="item.show" class="check_box_item" v-model="item.checked"
                                     @change="(value)=>handleCheckedChange(value,item,itemIndex)">
                    <el-checkbox v-for="(route,routeIndex) in item.children" :label="route.name" :key="routeIndex">
                      {{route.label}}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-card>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </template>
    
    <script>
      import {dynamicRouters} from '@/router'
    
      export default {
        name: "user-role",
        data() {
          return {
            dynamicRouters,
            accessibleRouter: [],
            currentNode: {
              key: null,
              name: ''
            },
            leftTree: [
              {
                id: "1",
                name: "测试123",
                hospitalId: "1"
              },
              {
                id: "1385121200761565185",
                name: "医工",
                hospitalId: "1"
              }
            ],
            defaultProps: {
               children: 'children',
               label: 'name'
             },
    
          }
        },
        watch: {
          currentNodeKey(id) {
            console.log(id)
          }
        },
        created() {
          this.accessibleRouter = this.generateRouterCheck(dynamicRouters)
        },
    
        methods: {
          generateRouterCheck(list, top = true) {
            let routers;
            routers = [];
            list.forEach(item => {
              const routeObj = {}
              routeObj.label = item.meta ? item.meta.title : ''
              routeObj.name = item.name
              if (top) {
                // 当路由中只有一个子路由,则权限配置中父名字取子路由的名字
                if (item.children.length === 1) {
                  routeObj.label = item.children[0].meta.title
                }
                routeObj.show = false
                routeObj.checkAll = false
                routeObj.isIndeterminate = false
                routeObj.checked = []
                routeObj.icon = 'el-icon-arrow-right'
              }
              if (item.children && item.children.length) {
                routeObj.children = this.generateRouterCheck(item.children, false)
              }
              routers.push(routeObj)
            })
            return routers
          },
          handleNodeClick(data, vnode, self) {
            this.currentNode.key = data.id;
            this.currentNode.name = data.name
            console.log(data, vnode, self)
            // 在这里查询角色的权限
          },
          handleAddOrEdit(e, operateData) {
            this.openDialog = !!e
            this.operateData = operateData
          },
          handleDelete(node, data) {
            this.$confirm('此操作无法恢复, 是否继续?', '确认删除角色吗', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                 this.$message.success('删除成功')
            }).catch(() => {
    
            });
          },
          showOrPackUp(item, index) {
            if (!item.show) {
              item.icon = 'el-icon-arrow-down'
            } else {
              item.icon = 'el-icon-arrow-right'
            }
            item.show = !item.show
            this.$set(this.accessibleRouter, index, item)
          },
          handleCheckAllChange(value, item, index) {
            console.log(value, item, index)
            item.checked = value ? item.children.map((item) => {
              return item.name
            }) : [];
            item.isIndeterminate = false;
            this.$set(this.accessibleRouter, index, item)
          },
          handleCheckedChange(value, item, index) {
            console.log(value, item, index)
            let checkedCount = value.length;
            item.checkAll = checkedCount === item.children.length;
            item.isIndeterminate = checkedCount > 0 && checkedCount < item.children.length;
            this.$set(this.accessibleRouter, index, item)
          }
        }
      }
    </script>
    
    <style scoped>
      .role {
        margin: 5px 20px;
      }
    
      .header_title {
        font-size: 16px;
      }
    
      .config_card {
        margin-bottom: 20px;
      }
    
      /deep/ .config_card .el-card__header {
        border: none;
        background-color: #fafafa;
      }
    
      /deep/ .config_card .el-icon-arrow-down,
      /deep/ .config_card .el-icon-arrow-right {
        font-size: 14px;
        font-weight: bolder;
        margin-right: 10px;
      }
    
      /deep/ .config_card .el-card__body {
        padding: 0;
      }
    
      .check_box_item {
        padding: 20px;
        border-top: 1px solid #e6ebf5;
      }
    
      /*设置卡片高度*/
      /deep/ .el-card__body {
        height: calc(100% - 60px);
      }
    
      /*设置树组件的高度,并开去滚动条*/
      /deep/ .el-tree {
        height: calc(100% - 32px);
        overflow-y: auto;
      }
    
      /deep/ .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
    
      /deep/ .el-tree-node {
        margin: 10px 0;
      }
    
      /*角色的删除按钮显示控制*/
      .delete_btn {
        visibility: hidden;
      }
    
      /deep/ .el-tree-node:hover .delete_btn {
        visibility: visible;
      }
    
    </style>
    
    
    展开全文
  • Vue路由

    2019-09-19 15:39:22
    Vue路由1 Vue路由是什么?2 实现前端路由3 实现后端路由4 vue-rouer的使用5 vue-router举例 1 Vue路由是什么? 2 实现前端路由 3 实现后端路由 4 vue-rouer的使用 1,引入html方法使用 2,模块化开发使用 5 vue-...

    1 Vue路由是什么?

    Vue路由就是指vue-router,其中router是指根据url分配到对应的处理程序,路由就是用来解析URL以及调用对应的控制器并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。
    Vue路由即vue-router,在web开发中,“router”是指根据url分配到对应的处理程序。
    路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它是决定一个端到端的网络路径。所以说路由就是用来解析URL以及调用对应的控制器的。
    在web开发中,客户端的请求是以url的形式传递给服务器,它根据URL将请求分配到指定的一个端并且在这个过程中对其进行处理。然后路由再调用相关的控制器,控制器调用相关的服务,并返回视图对象。路由再从视图对象中提取生成好的网页代码返回给Web服务器,最终返回给客户端。

    2 为什么要使用路由?

    在传统的web开发中每一个请求地址都会请求服务器来进行处理,但是用户有些操作则无需请求服务器,直接页面端修改下逻辑就能达到目的,在这种方式下最好的方法是使用路由,因为使用路由时,URL会随着改变,用户浏览一个网页时可以直接复制或收藏当前页面的URL给别人,这种方式对于搜索引擎和用户来说都是友好的

    3 SPA是什么?

    单页Web应用(single page application,SPA),就是只有一个Web页面的应用,
    是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序

    单页面应用程序:
    只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
    传统多页面应用程序:
    对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

    优势
    减少了请求体积,加快页面响应速度,降低了对服务器的压力
    更好的用户体验,让用户在web app感受native app的流畅

    4 SPA实现思路和技术点

    1 ajax
    2 锚点的使用(window.location.hash #)
    3 hashchange 事件 window.addEventListener(“hashchange”,function () {})
    4 监听锚点值变化的事件,根据不同的锚点值,请求相应的数据
    5 原本用作页面内部进行跳转,定位并展示相应的内容

    5 实现路由思路

    1、确保引入Vue.vue-router的js依赖
    2、首先需要定义组件(就是展示不同的页面效果)
    3、需要将不同的组件放入一个容器中(路由集合)
    4、将路由集合组装成路由器
    5、将路由挂载到Vue实例中
    6、定义锚点
    7、跳转
    8. 通过vue的路由可实现多视图的单页Web应用(基于html的SPA)
    8.0 引入依赖库

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
    
    

    8.1 创建自定义组件,例如:Home和Abort组件
    const Home = Vue.extend({});

      注1:extend是构造一个组件的语法器. 你给它参数,他给你一个组件,然后这个组件
           你可以作用到Vue.component这个全局注册方法里,也可以在任意vue模板里使用car组件
      注2:也可以用以前的方式创建和获得组件,效果也是一样的
           Vue.component("button-counter", {...});//创建组件
       var ButtonCounter = Vue.component('button-counter');//获得组件
       
       
       const Home = Vue.extend({
    		template: '<div><p>这是一个Home组件</p><div>Home组件内容</div></div>'
    	});
    
    	const Abort = Vue.extend({
    		template: '<div><p>这是一个Abort组件</p><div>Abort组件内容</div></div>'
    	});
    	//8.2 定义路由(即路线), 
      var routes = [{path: '/about',component: About}];
    
      注1:根路径“/”
    

    8.3 创建路由器实例,然后传 routes 配置
    const router = new VueRouter({routes:routes});

      注1:route和router的区别
           route:路线
           router:路由器
           路由器中包含了多个路线
           8.4 创建和挂载根实例。
      var vm = new Vue({router: router}).$mount('#app');
    

    8.5 前面使用RouterLink和RouterView组件导航和显示

      <!-- 使用RouterLink组件导航. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <router-link to="/home">go to Home</router-link>
      <!-- 使用RouterView组件显示. -->
      <router-view></router-view> 
    

    6 router-link相关属性

    6.1 to
    表示目标路由的链接

    <router-link to="/home">Home</router-link><!-- 字符串 -->
    <router-link v-bind:to="'home'">Home</router-link><!-- 使用 v-bind 的 JS 表达式 -->
    

    6.2 replace
    设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。

      <router-link :to="{ path: '/home'}" replace></router-link>
      vue中导航中的后退-前进-编程式导航
      this.$router.go(-1) :代表着后退
      this.$router.go(1):代表着前进
      this.$router.push({    切换到name为home的路由
       name:'home'
      });
    

    6.3 append
    设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b

      <router-link :to="{ path: 'relative/path'}" append></router-link>
    

    6.4 有时候想要 渲染成某种标签,例如

    • 。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航
    •    <router-link to="/foo" tag="li">foo</router-link>
            <!-- 渲染结果 -->
            <li>foo</li>
      

      6.5 active-class
      设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代

      6.6 exact-active-class
      配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

      6.7 event
      声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

        <router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>       
      

      7 实现前端路由

      vue-rouer的使用
      vue-router举例
      模拟一个手机端webapp页面的两个组件
      查看网址:http://127.0.0.1:8848/Vue_one/fourday/Vue路由.html#/

      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
      		<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
      		<title>Vue路由</title>
      	</head>
      	<body>
      		<!-- vue所管理的边界 -->
      		<div id="app">
      			<!-- to属性对应的是跳转路径 -->
      			<router-link to="/Home" replace />首页</router-link>
      			<router-link to="/Abort" />关于</router-link>
      			<router-view></router-view>
      		</div>
      		<script>
      			//定义两个组件,用来出两个请求(首页,关于本站)
      			const Home=Vue.extend({
      				template:"<div><p>这是一个Home组件</p><div>Home组件内容</div></div>"
      			});
      			
      			const Abort=Vue.extend({
      				template:"<div><p>这是一个Abort组件</p><div>Abort组件内容</div></div>"
      			});
      			//路由集合
      			let routes=[
      				{
      				path: '/Home',
      				component:Home
      				},
      			{
      				path: '/Abort',
      				component:Abort
      			}
      			]
      			//路由器
      			let router=new VueRouter({routes})
      			
      			
      			new Vue({
      				el:'#app',
      				//将路由器挂载到Vue所管理的边界上
      				router,
      				data(){
      					return{
      						title:'hello world Vue路由'
      					};
      				}
      			}) 
      		</script>
      	</body>
      </html>
      
      

      8 实现后端路由

      引入html方法使用
      模拟一个后台页面的两个组件
      查看网址:http://127.0.0.1:8848/Vue_one/fourday/后端.html#/

      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
      		<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
      		<title>后端路由登录</title>
      	</head>
      	<body>
      		<div id="app">
      			<!-- 使用vue官方提供的router-link元素使用,它默认渲染为一个a标签 -->
      			<router-link to="/login/12"/>登录</router-link>
      			<router-link to="/register" />注册</router-link>
      			<!-- 路由传参 -->
      			<!-- 使用查询字符串 给路由传递参数则不需要修改路由规则的path属性 -->
      			<!-- <router-link to="/login?id=10"/>登录</router-link> -->
      			<!-- 在控制的div中使用<router-view></router-view> -->
      			<!-- 路由匹配到的组件将显示在这里 -->
      			<router-view></router-view>
      		</div>
      		<script type="text/javascript">
      			//定义两个组件
      			/* var login={
      				template:'<h2>登录</h2>'
      			} */
      			var register={
      				template:'<h2>注册</h2>'
      			}
      			/* 使用query传递参数 */
      			var login={
      				template:'<h2>登录---{{$route.query.id}}</h2>'
      			}
      			//路由集合
      			var routerObj=new VueRouter({
      				routes:[
      					{path:'/login/:id',component:login},
      					{path:'/register',component:register},
      					/* 路由重定向 */
      					/* 设置一个默认展示组件 */
      					/* {path:'/',component:login}, */
      					/* 路由redirect重定向,设置默认组件 */
      					/* {path:'/',redirect:'login'} */
      					
      				]
      			});
      			/* router:routerObj将路由规则对象注册到VM实例上,用来监听URL地址的变化,然后展示对应的组件 */
      			var vm=new Vue({
      				el:'#app',
      				data:{
      					
      				},
      				methods:{
      					
      				},
      				//将路由规则对象注册到VM实例上
      				router:routerObj
      			})
      		</script>
      	</body>
      </html>
      
      
    展开全文
  • vue后台管理配置动态路由菜单(个人总结) 前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以vue-element-admin里的写死的权限路由菜单就不太适合我,自己研究了好半天,经历了各种死...
  • vue路由

    2018-01-05 18:18:58
    前端路由与后端路由作用是类似的,访问一定规则的url转向至指定的页面,只是后端路由是访问地址后由后端拦截处理后再转向,前端路由是通过...vue路由引入 默认webpack模板已经安装了vue-router包,不使用脚手架可引入v
  • vue axios 后台路由配置

    2020-07-29 15:02:14
    vue axios 后台路由配置 import request from '@/utils/request' // 增加 export function role_add(data) { return request({ url: '/api/role', method: 'POST', data }) } //展示列表 export function role_...
  • 前言 vue路由组件我使用的vue-router web服务器使用nginx Vue-router配置 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载 ...
  • 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由配置也要模块化 分享两个解决方案 —— Vue 路由配置的模块化(Plan A and Plan B) 注册需要 首先路由注册需要啥 ...
  • 实际开发项目中,关于登录和路由权限的控制参照了vue-element-admin这个明星项目,并在此基础上基于业务进行了整合,接下来我会以这个项目为例,仔细地剖析整个路由和权限校验的过程,也算是对...
  • Vue history路由模式配置及后台配置

    千次阅读 2019-06-26 16:29:11
    一:后台配置: 1、Nginx: location ~ ^/rootFile/ { root F:/XXX; try_files $uri $uri/ /rootFile/index.html; } 二:Vue配置: 1、文件 router.js将 mode 设置成 history 模式,并设置base:rootFile(.....
  • vue路由配置

    2021-04-07 19:30:46
    一级路由配置 1.0 在入口文件main.js中引入并配置router模块 import Vue from "vue"; import App from "./App.vue"; import router from "./router";//引入router Vue.config.productionTip = false; new Vue({ ...
  • vue配置路由来访问后台接口

    千次阅读 2020-11-30 10:28:20
    步骤三:组件映射配置,换言之,就是你要怎么访问你自己新建的vue文件 步骤四:在入口文件main.js文件中引入路由文件 步骤五:在入口文件main.js中写要访问后台的接口地址 步骤六:在App.vue中输入router-view...
  • vue路由模式

    2020-06-15 23:54:05
    vue路由模式 1、vue-router 路由模式有几种? 实际上存在三种模式: Hash: 使用URL的hash值来作为路由。支持所有浏览器。 History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 Abstract: ...
  • Vue 路由模块化配置

    2019-08-13 14:24:00
    企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由配置也要模块化 分享两个解决方案 —— Vue 路由配置的模块化(==Plan A== and ==Plan B==) 注册需要 首先路由注册...
  • 根据后端返回值动态设置vue路由
  • vue 路由 #

    2021-05-11 16:36:25
    vue默认路由带有# ,将mode设置为history模式需要后台配置后才可正常使用,不然会出现history模式下刷新404的问题
  • 有关vue路由的学习过程 开发工具:vscode 事先准备:利用脚手架构建模板实例,具体构建过程可参考官方文档 https://cli.vuejs.org/zh/. (之后会补上cli脚手架的构建过程) 1. 路由介绍 路由安装指令:npm install ...
  • Vue路由切换

    2020-09-24 20:32:20
    路由配置 routes: [ { // 一般路由 path: '/about', component: about }, { // 自动跳转路由 path: '/', redirect: '/about' } ] 组件: 1. router-link: 用来生成路由链接 <router-link to="/xxx"&
  • 一:后台配置: 1、Nginx: location ~ ^/rootFile/ { root F:/XXX; try_files $uri $uri/ /rootFile/index.html; } 二:Vue配置: 1、文件 router.js将 mode 设置成 history 模式,并设置base:rootFile(和...
  • vue路由技术初探

    2020-12-04 21:04:51
    传统的MVC架构的web开发,由后台设置路由规则,当用户自前端页面操作发送请求时,后台根据设定的路由规则处理请求,并将数据渲染到模板中,然后将模板返回给前端。 随着前后端技术的不断发展,交互体验得到了极大...
  • 文章目录vue实现后台管理路由前言一、准备静态模板二、根据项目整体布局划分组件结构1、抽离并渲染App根组件2、将左侧导航改为路由链接3、创建左侧菜单对应的路由组件4、添加到右侧主体区域添加路由占位符:5、添加...
  • 1.在方法里面传参(cantingid是之前通过请求接口拿到的) <divclass="DIV" @click="goto(cantingid)">...2.路由传参 goto(id){ //cantingid=id this.$router.push({name:'foodinfo',query:{cid:id}}) ...
  • 一、Vue路由基础用法: 1 .安装 npm install vue-router --save 2 .main.js中 //Vue路由:引入 import VueRouter from 'vue-router' Vue.use(VueRouter) //Vue路由:引入并创建组件 import BYHome from './...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,137
精华内容 6,854
关键字:

后台配置vue路由

vue 订阅